/*
Theme Name: TrainCompass Child
Theme URI: https://traincompass.net/
Description: TrainCompass presentation layer for GeneratePress.
Author: TrainCompass
Template: generatepress
Version: 1.0.1
Text Domain: traincompass
*/

:root {
  --tc-ink: #16222e;
  --tc-muted: #5e6d78;
  --tc-surface: #ffffff;
  --tc-canvas: #f6f8fa;
  --tc-brand: #0d6b57;
  --tc-brand-dark: #075143;
  --tc-border: #dce4e9;
  --tc-warn-bg: #fff7e8;
  --tc-warn-border: #f0c36d;
}

body {
  background: var(--tc-canvas);
  color: var(--tc-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  line-height: 1.85;
}

.site-content,
.inside-article,
.separate-containers .inside-article {
  background: var(--tc-surface);
}

.single-post .site-content .content-area {
  max-width: 820px;
  margin-inline: auto;
}

.single-post .site-content .inside-article {
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

.traincompass-breadcrumbs {
  max-width: 820px;
  margin: 1.25rem auto 0;
  padding-inline: clamp(1.5rem, 4vw, 3.5rem);
  color: var(--tc-muted);
  font-size: .875rem;
}

.traincompass-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.traincompass-breadcrumbs a:hover,
.traincompass-breadcrumbs a:focus-visible {
  color: var(--tc-brand);
  text-decoration: underline;
}

.traincompass-primary-nav,
.traincompass-language-switcher {
  max-width: 1180px;
  margin-inline: auto;
  padding: .75rem 1.5rem;
}

.traincompass-primary-nav ul,
.traincompass-language-switcher ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.traincompass-primary-nav a,
.traincompass-language-switcher a {
  color: var(--tc-ink);
  font-weight: 650;
  text-decoration: none;
}

.traincompass-language-switcher {
  padding-top: 0;
  font-size: .875rem;
}

.training-article {
  font-size: 1rem;
}

.training-article h1,
.training-article h2 {
  color: var(--tc-ink);
  font-weight: 750;
  letter-spacing: .01em;
  line-height: 1.4;
}

.training-article h1 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.75rem);
}

.training-article h2 {
  margin: 2.8rem 0 1rem;
  font-size: clamp(1.3rem, 3.5vw, 1.75rem);
}

.training-article p,
.training-article li {
  overflow-wrap: anywhere;
}

.article-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--tc-border);
}

.article-lead {
  margin-block: 1.1rem 0;
  color: #334552;
  font-size: 1.06rem;
}

.article-answer,
.today-action,
.diagnosis-cta,
.safety-note,
.related-articles,
.references {
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--tc-border);
  border-radius: 14px;
}

.article-answer {
  background: #eff9f5;
  border-color: #b9dfd2;
}

.today-action {
  background: #f3f8fd;
  border-color: #c7daed;
}

.diagnosis-cta {
  background: var(--tc-brand);
  border-color: var(--tc-brand);
  color: #fff;
}

.diagnosis-cta h2,
.diagnosis-cta a {
  color: #fff;
}

.diagnosis-cta__button {
  display: inline-block;
  padding: .75rem 1.1rem;
  border-radius: 8px;
  background: #fff;
  color: var(--tc-brand) !important;
  font-weight: 700;
  text-decoration: none;
}

.diagnosis-cta__button:hover,
.diagnosis-cta__button:focus-visible {
  background: #e4f5ef;
}

.safety-note,
.training-article--medical .safety-note {
  background: var(--tc-warn-bg);
  border-color: var(--tc-warn-border);
}

.ad-slot {
  display: grid;
  min-height: 110px;
  margin: 2rem 0;
  place-items: center;
  border: 1px dashed #aebcc5;
  border-radius: 10px;
  background: #f7f9fa;
  color: var(--tc-muted);
}

.ad-slot::after {
  content: "広告枠";
  font-size: .8rem;
}

.related-articles ul,
.references ul,
.today-action ol {
  margin: .75rem 0 0;
  padding-left: 1.25rem;
}

.training-article a:not(.diagnosis-cta__button) {
  color: var(--tc-brand-dark);
  text-underline-offset: .16em;
}

.training-article a:not(.diagnosis-cta__button):hover,
.training-article a:not(.diagnosis-cta__button):focus-visible {
  color: var(--tc-brand);
}

.traincompass-site-footer {
  margin-top: 3rem;
  padding: 2rem 1.5rem;
  background: #102b32;
  color: #d9e8e8;
  font-size: .9rem;
}

.traincompass-site-footer__inner {
  max-width: 1180px;
  margin-inline: auto;
}

.traincompass-site-footer a {
  color: #fff;
}

@media (max-width: 768px) {
  .inside-header,
  .main-navigation .inside-navigation {
    padding-inline: 1rem;
  }

  .training-article h2 {
    margin-top: 2.25rem;
  }
}