/* ===========================
   Global Base Styles
   =========================== */
body {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
  background-color: #fdfdfd;
}

/* Center all main sections */
section {
  max-width: 800px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fafafa;
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* Headings + intro text are centered */
h1, h2, h3,
.section-title,
.section-intro {
  text-align: center;
}

/* ===========================
   Dialogue Section
   =========================== */
#dialogue-section {
  text-align: center; /* headings + intros */
}

.dialogue-title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.dialogue-intro {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 2rem;
}

/* Explanatory paragraphs */
.dialogue-explainer {
  font-size: 1.05rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

/* Dialogue container (chat UI) */
#dialogue-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem auto;
  max-width: 700px;
  text-align: left; /* make conversation left-aligned */
}

/* Dialogue output box */
#dialogue-output {
  width: 100%;
  min-height: 150px;
  padding: 1.2rem;
  margin-bottom: 1.5rem;
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #ddd;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.08);
  font-size: 1.1rem;
  line-height: 1.6;
  overflow-y: auto;
  white-space: pre-line;
}

/* Dialogue form */
#dialogue-form {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#dialogue-input {
  width: 100%;
  min-height: 140px;
  padding: 1rem;
  font-size: 1.1rem;
  border-radius: 0.8rem;
  border: 1px solid #ccc;
  resize: vertical;
  margin-bottom: 1rem;
}

#dialogue-form button {
  align-self: flex-end;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.8rem;
  background: #4a7c59;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

#dialogue-form button:hover {
  background: #3a6045;
}

/* ===========================
   Glossary
   =========================== */
#glossary {
  text-align: left; /* definitions read better left aligned */
}

.glossary-term {
  font-weight: bold;
  color: #333;
}

.glossary-definition {
  margin-bottom: 1.5rem;
  color: #555;
}

/* ===========================
   Toolkit (future)
   =========================== */
#toolkit {
  text-align: left;
}

.tool-item {
  margin-bottom: 1rem;
}

/* ===========================
   Utilities
   =========================== */
.centered {
  text-align: center;
}

.left {
  text-align: left;
}
/* Global paragraph alignment */
.container p {
  text-align: justify;
}
/* Limit line length for readability */
.container {
  max-width: 800px;   /* adjust as needed: 700–900px works well */
  margin: 0 auto;     /* centers the content */
  padding: 0 1rem;    /* breathing room on mobile */
}

.container p {
  text-align: justify;
  text-align-last: left; /* keeps last line neat */
}
/* Base container styling */
.container {
  max-width: 800px;   /* desktop default */
  margin: 0 auto;
  padding: 0 1rem;
}

.container p {
  text-align: justify;
  text-align-last: left;
  line-height: 1.6;
}

/* Tablet (portrait and small landscape) */
@media (max-width: 1024px) {
  .container {
    max-width: 700px;
  }
}

/* Large phones and small tablets */
@media (max-width: 768px) {
  .container {
    max-width: 90%; /* use percentage for narrow screens */
  }
}

/* Small phones */
@media (max-width: 480px) {
  .container {
    max-width: 95%;
    font-size: 0.95rem; /* slightly smaller text */
  }
}
/* Headings centered */
h1, h2, h3, h4, h5, h6 {
  text-align: center;
  margin-bottom: 1rem;
}

/* Section titles (like Dialogue, Welcome, etc.) */
section h2,
section h3 {
  text-align: center;
  margin-bottom: 1.2rem;
}

/* Paragraphs stay justified inside the container */
.container p {
  text-align: justify;
  text-align-last: left; /* last line left aligned for readability */
}
/* Center all main content with a max width */
.container, header, main, section, footer {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem; /* keeps breathing room on mobile */
}

/* Headings centered */
h1, h2, h3, h4, h5, h6 {
  text-align: center;
  margin-bottom: 1rem;
}

/* Section-specific titles */
section h2,
section h3 {
  text-align: center;
  margin-bottom: 1.2rem;
}

/* Paragraphs justified for readability */
.container p,
section p {
  text-align: justify;
  text-align-last: left; /* keeps last line left-aligned */
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container, header, main, section, footer {
    max-width: 95%;
    padding: 0 0.5rem;
  }
}
/* Section styling - soft card look */
section {
  background: #fafafa; /* very light gray */
  border-radius: 1rem;
  padding: 2rem;
  margin: 2rem auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Keep text inside consistent */
section p {
  margin-bottom: 1rem;
}

/* Ensure dialogue section keeps its own feel */
#dialogue-section {
  background: #fefefe; /* slightly different white */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* Header (Opening Invitation) */
header {
  background: linear-gradient(135deg, #fefcf9, #f3eee7);
  padding: 3rem 2rem;
  margin: 2rem auto;
  border-radius: 1.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  text-align: center;
  max-width: 900px;
}

header h1, 
header p {
  color: #333;
  line-height: 1.7;
}


/* Glossary link styling */


/* Keep glossary links the same color before/after visiting */
.glossary-link,
.glossary-link:visited {
  color: #0645ad;           /* pick your link color */
  text-decoration: underline;
}

/* Nice hover/focus feedback (optional) */
.glossary-link:hover,
.glossary-link:focus {
  background: #fff3b0;      /* soft highlight on hover */
  outline: none;
}
/* When the page loads with #...-anchor in the URL, highlight the next glossary link */
[id$="-anchor"]:target + .glossary-link {
  background: #fff3b0;
  box-shadow: 0 0 0 2px #ffe08a inset;
  border-radius: 0.2rem;
}
/* --- Site Navigation: high contrast for visibility --- */
.site-nav {
  margin: 1rem 0;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;   /* center under the page title */
}

.site-nav a:link,
.site-nav a:visited {
  color: #003366;            /* deep navy blue for strong contrast */
  font-weight: 600;          /* bold enough to stand out */
  text-decoration: none;
  background: #e6f0ff;       /* soft blue highlight behind text */
  padding: 0.3rem 0.6rem;    /* makes the background visible */
  border-radius: 0.4rem;     /* soft corners */
}

.site-nav a:hover,
.site-nav a:focus {
  background: #99ccff;       /* stronger blue on hover */
  color: #000;               /* solid black text on hover */
  text-decoration: underline;
}
/* --- Final Glossary Link Styling --- */
a.glossary-link:link,
a.glossary-link:visited {
  color: #0645ad;             /* strong readable blue */
  font-weight: 600;           /* a bit bolder */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a.glossary-link:hover,
a.glossary-link:focus-visible {
  color: #000;                /* black on hover for contrast */
  background: #fff3b0;        /* soft yellow highlight */
  border-radius: 0.2rem;
}
/* --- Final Site Navigation Styling --- */
.site-nav {
  margin: 1rem 0;
  display: flex;
  gap: 1.5rem;               /* space between links */
  flex-wrap: wrap;           /* wrap on small screens */
  justify-content: center;   /* center under the title */
}

.site-nav a:link,
.site-nav a:visited {
  color: #003366;            /* deep navy for strong contrast */
  font-weight: 600;          /* bolder text */
  text-decoration: none;
  background: #e6f0ff;       /* soft blue button background */
  padding: 0.4rem 0.8rem;    /* button spacing */
  border-radius: 0.4rem;     /* rounded corners */
  transition: background 0.2s, color 0.2s;
}

.site-nav a:hover,
.site-nav a:focus {
  background: #99ccff;       /* brighter blue on hover */
  color: #000;               /* black text on hover */
  text-decoration: underline;
}
/* Sticky quick menu at top of Toolkit */
.toolkit-menu {
  position: sticky;
  top: 0;                  /* sticks under your site header */
  z-index: 10;
  background: #fff;
  padding: .6rem .75rem;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.toolkit-menu a {
  text-decoration: none;
  font-weight: 600;
  padding: .35rem .6rem;
  border: 1px solid #e2e2e2;
  border-radius: .5rem;
}

.toolkit-menu a:hover { background: #f4f4f4; }

/* Make anchor jumps land nicely below the sticky menu */
.tool-entry { scroll-margin-top: 80px; }
#toolkit-menu { scroll-margin-top: 80px; }

/* Dropdown alignment additions */
.toolkit-menu { align-items: center; }
.toolkit-menu .spacer { margin-left: auto; }
.jump-to select { margin-left: .35rem; }

/* Small screens: allow horizontal scroll if needed */
@media (max-width: 640px) {
  .toolkit-menu {
    overflow-x: auto;
    white-space: nowrap;
  }
  .toolkit-menu a { flex: 0 0 auto; }
}
.jump-to { opacity:.9; }
.return-links { margin-top:1rem; }

/* Shared status UI */
.notice {
  max-width: 760px;
  margin: 1rem auto;
  padding: 1rem 1.25rem;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fafafa;
}
.badge {
  display: inline-block;
  font-size: .8rem;
  padding: .15rem .6rem;
  border: 1px solid #ccc;
  border-radius: 999px;
  margin-left: .5rem;
  vertical-align: middle;
}
.placeholder-note {
  font-style: italic;
  opacity: .85;
  margin: .25rem 0 .5rem;
}
.centered { text-align: center; }

/* Substack button + footer helper */
.btn {
  display: inline-block;
  padding: .5rem .9rem;
  border: 1px solid #ddd;
  border-radius: 12px;
  text-decoration: none;
}
.btn:hover { background: #f3f3f3; }
.page-footer .footer-cta { text-align: center; margin-top: .5rem; }

.nav a[aria-current="page"] {
  text-decoration: underline;
  font-weight: 600;
}

.site-nav a[aria-current="page"] { text-decoration: underline; font-weight: 600; }

.toolkit-menu a[aria-current="location"] {
  text-decoration: underline;
  font-weight: 600;
}

.entry-subtitle { font-style: italic; opacity: .85; margin-top: .25rem; }

/* === Unified nav highlight (desktop + phone) === */
:root{
  --nav-text:#111;
  --nav-hover:#000;
  --nav-current-bg:#eef1f4;
  --nav-current-text:#000;
}

/* base nav links */
.site-header .nav a,
.page-footer .nav a{
  color:var(--nav-text);
  text-decoration:none;
}
.site-header .nav a:visited,
.page-footer .nav a:visited{
  color:var(--nav-text);
}
.site-header .nav a:hover,
.page-footer .nav a:hover,
.site-header .nav a:focus,
.page-footer .nav a:focus{
  text-decoration:underline;
  color:var(--nav-hover);
}

/* current page (same look everywhere) */
.site-header .nav a[aria-current="page"],
.page-footer .nav a[aria-current="page"]{
  background:var(--nav-current-bg);
  color:var(--nav-current-text) !important; /* defeats visited color */
  text-decoration:none !important;
  font-weight:600;
  border-radius:10px;
  padding:0 .5rem;
}

/* mobile: bigger tap targets; hide bullets when wrapping */
@media (max-width:640px){
  .site-header .nav,
  .page-footer .nav{ display:flex; flex-wrap:wrap; gap:.25rem .5rem; }
  .site-header .nav a,
  .page-footer .nav a{ padding:.25rem .4rem; }
  .site-header .nav span[aria-hidden="true"],
  .page-footer .nav span[aria-hidden="true"]{ display:none; }
}

/* toolkit in-page highlight stays consistent */
.toolkit-menu a[aria-current="location"]{
  text-decoration:underline;
  font-weight:600;
}
section[id] { scroll-margin-top: 6rem; }
.page-content .lede { font-size: 1.1rem; line-height: 1.6; opacity: .9; }

/* highlight current link anywhere we use .nav */
.nav a[aria-current="page"] {
  font-weight: 700;
  text-decoration: underline;
}

/* keep the researcher link unobtrusive but visible to bots */
.footer-note { font-size: 0.875rem; opacity: 0.75; margin-top: 0.75rem; }
.footer-note a { text-decoration: underline; }

/* Nourishing Paper entries */
article.nourishing-entry {
  background: #fafafa;
  border-radius: 1rem;
  padding: 2rem;
  margin: 2rem auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

article.nourishing-entry header h2 {
  font-size: 1.5em;
  margin-bottom: 0.5rem;
}

article.nourishing-entry .entry-subtitle {
  font-style: italic;
  color: #666;
  margin-bottom: 1.5rem;
}

article.nourishing-entry p {
  margin-bottom: 1rem;
  text-align: justify;
  text-align-last: left;
  line-height: 1.6;
}

article blockquote {
  margin: 2em 0;
  padding-left: 1em;
  border-left: 3px solid #ccc;
  font-style: italic;
  color: #666;
}

/* --- Dialogue page helpers --- */

/* Small pill-style badge */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 0.5rem;
  background-color: #eee;
  color: #444;
  margin-left: 0.25rem;
}

/* Animated dots for "coming soon" */
.coming-dots::after {
  content: '...';
  animation: dots 1.5s steps(3, end) infinite;
}
@keyframes dots {
  0%   { content: ''; }
  33%  { content: '.'; }
  66%  { content: '..'; }
  100% { content: '...'; }
}

/* Screen-reader only text (keeps layout clean) */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}