:root {
  --bg: #f9fafb;
  --card-bg: #ffffff;
  --text: #1c1c1e;
  --subtext: #6b7280;
  --accent: #2563eb;
  --border: #e5e7eb;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  --gutter: 20px; /* new: global horizontal gutter */
}

/* Global box-sizing and text-wrapping to avoid overflow */
* { box-sizing: border-box; }
html, body { min-width: 0; }
p, h1, h2, h3, h4, h5, li, pre { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  display: flex;
  flex-direction: column;
  height: calc(var(--vh, 1vh) * 100); /* use JS-updated --vh to avoid mobile browser UI covering bottom */
}

header, footer {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  text-align: center;
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* Override header colors per user request: deep blue background, light text */
header {
  background: #004080; /* deep blue */
  color: #fafeff;      /* very light text */
  border-bottom: none; /* remove light border on dark header */
}

/* Ensure header text elements inherit the header color */
.header .site-title,
.header .tagline,
.header .host {
  color: inherit;
}

/* allow absolutely positioned elements (like a burger button) inside the header */
header { position: relative; }

/* Burger button placement — moved higher by using a smaller top value */
.burger {
  position: absolute;
  top: 8px; /* smaller value = placed higher */
  right: var(--gutter);
  z-index: 50;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  flex: 1;
  display: flex;
  overflow: hidden;
  padding: 0 var(--gutter); /* prevent touching viewport */
}

.toc {
  width: calc(30% - var(--gutter));
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 1.5rem var(--gutter); /* use horizontal gutter for consistent spacing */
  min-width: 220px;
}

/* TOC item styles: slightly smaller text and tighter spacing for better density */
.toc ul, .toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; }
.toc a, .toc button {
  display: block;
  font-size: 0.95rem; /* reduced font size */
  line-height: 1.4;
  color: var(--text);
  padding: 6px 0; /* vertical spacing between items */
  text-decoration: none;
}
.toc a.sub { color: var(--subtext); font-size: 0.9rem; padding-left: 8px; }

.content {
  flex: 1;
  padding: 2rem;
  padding-bottom: 6rem; /* increased bottom space so content doesn't sit flush with viewport bottom */
  overflow-y: auto;
  background: var(--bg);
}

/* Constrain reading area so lines don't become too long and center content */
.content .reading { max-width: 880px; margin: 0 auto; }

/* Make sure pre blocks wrap instead of overflowing */
.reading pre {
  background: #f3f4f6;
  padding: 1rem;
  border-radius: var(--radius);
  line-height: 1.6;
  font-size: 0.95rem;
  white-space: pre-wrap; /* allow wrapping */
  word-break: break-word;
  overflow-wrap: break-word;
}

.reflection-card {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius);
  background: #f8fafc;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

button {
  all: unset;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  color: var(--text);
  text-align: left; /* makes long button labels wrap */
}

button:hover {
  background: #f1f5f9;
}

/* Style the hamburger/toc toggle as a yellow circular button with dark text */
.toc-toggle {
  color: #ffd400;         /* dark text for contrast */
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.toc-toggle:hover,
.toc-toggle:focus {
  background: #ffdf66; /* slightly lighter on hover/focus */
  outline: none;
}

/* Ensure the small-screen TOC toggle (hamburger) does not expand to full width
   and only affects its own area on hover/focus. This prevents the entire header
   line from changing color when the burger is clicked. */
.toc-toggle {
  display: inline-block; /* override any generic button display:block */
  width: auto;           /* prevent width:100% from stretching it */
  max-width: none;
  padding: 0.4rem 0.6rem; /* match other buttons' sizing */
  text-align: center;
}

.back-btn {
  margin-top: 1.5rem;
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  text-align: center;
  font-weight: 500;
}

/* Make site title stand out with a distinct serif italic style */
.site-title {
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.6px;
  font-size: 4rem;
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

/* New styles for the Discover button in the welcome area */
.discover-btn {
  display: inline-block;
  background: #004080; /* updated to match header deep blue */
  color: #fafeff;
  padding: 0.6rem 1rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,64,128,0.12);
}

.discover-btn:hover { filter: brightness(0.96); transform: translateY(-1px); }

.discover-container {
  background: #e6f7ff; /* soft sky blue */
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .main { flex-direction: column; padding: 0 16px; }
  .toc { width: 100%; border-right: none; border-bottom: 1px solid var(--border); min-width: 0; }
  .content {
    padding: 1rem 0;
    padding-bottom: 5rem; /* increased bottom gutter for narrow screens */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
  }
  .content::-webkit-scrollbar { display: none; } /* Chrome, Safari, Opera */
}

@media (max-width: 480px) {
  /* Slightly smaller base font for better fit on small screens */
  html { font-size: 14px; }
  body { font-size: 14px; }

  /* Header text sizes */
  .site-title { font-size: 3.5rem; }
  .tagline, .host { font-size: 0.75rem; }

  /* TOC and content padding reductions */
  .toc { padding: 10px 12px; }
  .content { padding: 12px; padding-bottom: 4rem; -ms-overflow-style: none; scrollbar-width: none; }
  .content::-webkit-scrollbar { display: none; }

  /* Reading area adjustments */
  .content .reading { max-width: 100%; padding: 0; }
  .reading pre { font-size: 0.9rem; padding: 0.75rem; }

  /* Buttons and cards */
  button { padding: 0.3rem 0.45rem; font-size: 0.95rem; }
  .reflection-card { padding: 0.75rem; }

  /* Tweak burger placement on small screens */
  .burger { top: 2px; right: 5px; }
}