/* === SITE-WIDE: Wider content container (override theme defaults) ===
   Put this at the end of your main site CSS file (static/css/...)
   Adjust --SITE_MAX_WIDTH to tweak overall width (e.g. 1400px, 1600px)
*/
:root {
  --SITE_MAX_WIDTH: 1400px; /* change this value if you want even wider */
  --PAGE_SIDE_PADDING: 3rem; /* horizontal page padding */
}

/* Broad overrides to release theme's narrow container */
body, main, .container, .content, .post, .post-content, .article, .page, .site-main, #main {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Center a new wide wrapper that controls visual width */
.site-wide-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-left: var(--PAGE_SIDE_PADDING);
  padding-right: var(--PAGE_SIDE_PADDING);
}

/* Use this wrapper to limit readable width while using more of the viewport */
.site-wide-inner {
  width: 100%;
  max-width: var(--SITE_MAX_WIDTH);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure header, page title, and ToC align with inner width */
.header, .page-header, .article-header, #TableOfContents, .toc {
  max-width: var(--SITE_MAX_WIDTH);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--PAGE_SIDE_PADDING) !important;
  padding-right: var(--PAGE_SIDE_PADDING) !important;
  box-sizing: border-box;
}

/* Make sure images and media do not overflow */
.site-wide-inner img, .site-wide-inner video, .site-wide-inner iframe {
  max-width: 100%;
  height: auto;
}

/* Example: larger grid for About page (if you keep page-specific classes) */
.about-grid {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 2.5rem;
  align-items: start;
}

/* Responsive fallback: stack on small widths */
@media (max-width: 1024px) {
  .site-wide-wrapper {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .header, .page-header, #TableOfContents {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}
/* === FORCE SITE GUTTERS & CENTER CONTENT ===
   Add this to the END of static/css/sitewide.css
*/
:root {
  --page-gutter: 48px;     /* change this to increase/decrease side gaps */
  --site-max: 1400px;      /* max content width */
}

/* Ensure body has no unexpected margins */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Apply gutter to the outermost wrappers (force it) */
body, .site, .site-wrap, .site-wide-wrapper {
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
  box-sizing: border-box !important;
}

/* Constrain main content to centered readable width and keep gutters */
main, .main, .site-main, .content, .post, .post-content, .article, .site-wide-inner {
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;   /* gutters are handled at outer wrapper */
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Align header & navigation with same max width + gutter */
header, .site-header, .header, .page-header, .site-branding, .nav {
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
  box-sizing: border-box !important;
}

/* If theme placed any top banner / decorative bars full-bleed, keep visual gap */
header > .banner, .top-bar, .site-top {
  padding-left: var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}

/* If some elements still stretch full width, limit their inner content */
.container, .wrap, .inner, .container-fluid {
  max-width: var(--site-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Extra safety for very wide screens */
@media (min-width: 2000px) {
  :root { --page-gutter: 64px; --site-max: 1700px; }
}

/* Responsive: smaller gutters on mobile */
@media (max-width: 900px) {
  :root { --page-gutter: 16px; }
  body, .site, .site-wide-wrapper { padding-left: 16px !important; padding-right: 16px !important; }
  main, .content, header { padding-left: 0 !important; padding-right: 0 !important; }
}

body {
  padding-top: 3.25rem !important; /* matches Terminal theme default */
}

.site-header {
  margin-bottom: 1.5rem !important; 
}

/* ---------------------------------------------
   PROFESSIONAL TIMELINE — FINAL VERSION
   --------------------------------------------- */

.timeline-column {
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  margin-top: 2rem;
}

.timeline-title {
  font-style: italic;
  font-size: 1.2rem;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}

/* A single timeline entry */
.timeline-entry {
  margin-bottom: 2.5rem;
  position: relative;
  cursor: pointer;
}

/* Bullet dot */
.timeline-entry::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  position: absolute;
  left: -1.35rem;
  top: 0.3rem;
}

/* DATE — grey */
.timeline-date {
  font-family: inherit;
  font-size: 0.95rem;
  color: #9CA3AF; /* grey-400 */
  margin-bottom: 0.35rem;
}

/* ORG — green */
.timeline-org {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.15rem;
}

/* ROLE — yellow (Terminal-ish) */
.timeline-role {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #FACC15; /* amber-400 style */
  margin-bottom: 0.75rem;
}

/* DETAILS — hidden by default */
.timeline-details {
  display: none;
  color: var(--foreground);
  line-height: 1.6;
  padding-left: 0.25rem;
}

/* Visible when entry is expanded */
.timeline-entry.open .timeline-details {
  display: block;
}

/* Hover feedback */
.timeline-entry:hover .timeline-org,
.timeline-entry:hover .timeline-role {
  text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 700px) {
  .timeline-column {
    border-left-width: 1px;
    padding-left: 0.75rem;
  }
  .timeline-entry::before {
    left: -1rem;
  }
}
/* Remove button styling so it behaves like plain text */
.timeline-org {
  all: unset;
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
  display: block;          /* forces org + role onto their own lines */
  margin-top: 0.2rem;
}

/* Make the role appear BELOW the org */
.timeline-role {
  display: block;
  font-style: italic;
  margin-top: 0.1rem;
  color: #FACC15; /* yellow/amber */
}

/* Date grey (NOT green) */
.timeline-year {
  color: #9CA3AF; /* tailwind grey-400 vibe */
  font-weight: 500;
}

/* Details block (no box) */
.timeline-details {
  display: none;
  margin-top: 0.8rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  line-height: 1.55;
  color: var(--foreground);
}

/* On click */
.timeline-entry.open .timeline-details {
  display: block;
}

/* Convert <br> lines inside details into bullet-like spacing */
.timeline-details br {
  content: "";
  display: block;
  margin-bottom: 0.45rem;
}

/* True bullet effect (no list needed) */
.timeline-details {
  position: relative;
}
.timeline-details::before {
  content: "";
  position: absolute;
  left: -0.7rem;
  top: 0.45rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.8;
}
/* DETAILS → converts each <br>-separated line into bullets */
.timeline-details {
  display: none;
  margin-top: 0.8rem;
  margin-bottom: 1rem;
  padding-left: 1.2rem;
  line-height: 1.55;
  color: var(--foreground);
}

/* When open */
.timeline-entry.open .timeline-details {
  display: block;
}

/* Each line becomes a bullet: split lines using pseudo-elements */
.timeline-details > span {
  display: block;
  position: relative;
  padding-left: 0.8rem;
  margin-bottom: 0.4rem;
}

.timeline-details > span::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: bold;
}
.timeline-details {
  display: none;
  margin-top: 0.8rem;
  padding-left: 1.2rem;
  line-height: 1.55;
  color: var(--foreground);
}

/* When open */
.timeline-entry.open .timeline-details {
  display: block;
}

/* Bullet formatting */
.timeline-details > span {
  display: block;
  position: relative;
  padding-left: 0.8rem;
  margin-bottom: 0.4rem;
}

.timeline-details > span::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: bold;
}

/* About page: let the page's own responsive CSS breathe */
@media (max-width: 900px) {
  .about-wrapper {
    padding: 1rem !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* Restore right-edge breathing room on mobile for post content */
@media (max-width: 900px) {
  .post-content,
  .content,
  .post,
  article,
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100vw !important;
  }

  .bio p,
  .bio li,
  .bio h2 {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
  }
}

/* === MOBILE CLIP FIX === */
html {
  overflow-x: hidden;
}

@media (max-width: 900px) {
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* Force all content wrappers to respect that padding */
  main, .post, .post-content, .content, article, .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}