/* --- General Page Styling --- */
body {
    font-family: Arial, sans-serif;
    background: #f8f9fa;
    color: #222;
    margin: 0;
    padding: 0;
}

main {
    max-width: 900px;
    margin: 30px auto 30px auto;
    background: #fff;
    padding: 2.2em 2em 2em 2em;
    border-radius: 12px;
    box-shadow: 0 2px 12px #e5e4ea;
}

h1, h2 {
    color: #2e1868;
    margin-top: 0.5em;
}

h2 {
    font-size: 2em;
}

a {
    color: #0056b3;
    text-decoration: none;
    transition: color 0.2s;
}
a:hover {
    text-decoration: underline;
    color: #117a37;
}

/* --- Header Layout --- */
header {
    background: #C4E0C6;
    color: #222;
    padding: 2em 0 1em 0;
    text-align: center;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
}

.header-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 7px;
}

.author-box {
    display: flex;
    align-items: center; /* Vertically center the image and text */
    gap: 20px; /* Space between image and text */
    font-size: 3em;           /* 3em can be HUGE - try 2em and adjust */
    flex-wrap: wrap;         /* if too narrow, stack them vertically */
}

.author-logo {
    width: 300px;
    height: 300px;    
    border-radius: 7px;
    object-fit: cover;  /* cover looks more natural than contain for avatars */
    flex-shrink: 0;          /* never shrink the image */
    display: block;             /* Ensures no extra inline space */
    vertical-align: middle;     /* Remove baseline gap */
    border: none;               /* Remove any border */
}



.site-title {
    font-size: 2.2em;
    margin: 0;
    font-weight: bold;
    color: #2e1868;
    letter-spacing: 1px;
}

/* --- Navigation --- */
nav {
    margin-top: 12px;
}

nav a {
    color: #222;
    text-decoration: none;
    margin: 0 18px;
    font-size: 1.2em;    /* Increased font size for navigation */
    font-weight: bold;
    padding: 6px 14px;
    border-radius: 5px;
    transition: background 0.18s, color 0.18s;
    display: inline-block;
}

nav a:hover {
    background: #222;
    color: #C4E0C6;
}

/* --- Footer --- */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 1.3em 0;
    background: #C4E0C6;
    border-top: 1px solid #ddd;
    font-size: 1em;
    color: #355153;
    border-radius: 0 0 12px 12px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 700px) {
    main {
        padding: 1em 0.6em;
    }
    .header-top {
        flex-direction: column;
        gap: 10px;
    }
    .site-title {
        font-size: 1.3em;
    }
    nav a {
        font-size: 1em;
        margin: 0 6px;
        padding: 6px 8px;
    }
}
.content {
    max-width: 900px;
    margin: 40px auto;
    background: #fff;
    padding: 32px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 16px #0001;
}
img {
    max-width: 100%;
    border-radius: 4px;
    margin: 24px 0;
}

.ps1 {
	/*font-weight: bold;
	color: #2e1868;*/
}
.ps2 {
	/* font-weight: bold;
	color: #2e1868; */
}
.ps3 {
	/* font-weight: bold;
	color: #2e1868; */
}
.ps4 {
	/* font-weight: bold;
	color: #2e1868; */
}
.ps5 {
	/* font-weight: bold;
	color: #2e1868; */
}
.s1 {
	/*text-decoration: underline;
	font-style: italic;*/
}
.s2 {
	/*text-decoration: underline;
	font-style: italic;*/
}
.s3 {
	/*text-decoration: underline;
	font-style: italic;*/
}
.s4 {
	/*text-decoration: underline;
	font-style: italic;*/
}
.s5 {
	text-decoration: underline;
	font-weight: bold;
	color: #0039B0;
	font-style: italic;
}
table, th, td {
  border: 1px solid black;
 border-collapse: collapse;
}

    /* Optional page-local tweaks you can remove if not needed*/
    .hero-note { color: #355153; margin-top: 8px; }
    .pill { display:inline-block; padding:.2em .6em; border-radius:999px; background:#C4E0C6; color:#222; font-size:.9em; }
.header-top {
  display: flex;
  align-items: center;
  justify-content: center; /* centers branding block */
  position: relative;      /* allows absolute positioning */
}

.legacy {
  position: absolute;
  left: 10px;              /* pushes it to far left */
  padding: .2em .6em;
  border-radius: 999px;
  background: #B1FFC6;
  color: #222;
  font-size: .7em;
  text-decoration: none;
}

.branding {
  display: flex;
  align-items: center;
  gap: 10px;
}






 
    .lede { font-size:1.2em; line-height:1.7; }
    .callout { border-left:4px solid #2e1868; padding:.6em .9em; background:#f3f5ff; border-radius:6px; }
    .twocol { display:grid; grid-template-columns: 1fr 1fr; gap:22px; }
    .twocol img { margin: 6px 0; }
    @media (max-width: 820px) { .twocol { grid-template-columns: 1fr; } }
    table.compare td, table.compare th { padding:.5em .6em; }
    table.compare th { background:#f5f5fa; } 
	/* size of the code block <pre><code> */
	
.code-block.small { font-size: 14px; }
.code-block.medium { font-size: 18px;white-space: normal; /* Behaves like a paragraph */ }
.code-block.large { font-size: 22px; }
.code-block.dark  { background-color: #222; color: #eee; }

/* table format 
   <table class="vit-table">
      <caption></caption>
      <thead>
        <tr>
			<th></th>
			<th></th>
			<th></th>
        </tr>
      </thead>
      <tbody>          
        <tr>
			<td></td>
			<td></td>
			<td></td>
        </tr>
	</tbody>
	</table>*/
.vit-table {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, sans-serif;
}

.vit-table th,
.vit-table td {
  border: 1px solid #333;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.vit-table th {
  background-color: #f2f2f2;
}

.vit-table caption {
  font-weight: bold;
  margin-bottom: 10px;
}
/* Numbered Paragraphs */

/* style.css */

/* Container: holds counters  
<div class="vit-para">
	<p class="main"> </p>
	<p class="main"></p>
	<p class="main">
		<p class="sub"></p>
	</p>
</p>	*/
.vit-para {
  counter-reset: mainpara;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 20px;
}

/* Main paragraphs: (1), (2), (3) ... */
.vit-para p.main {
  counter-increment: mainpara;
  counter-reset: subpara; /* reset sub at each main */
  margin-bottom: 12px;
  text-align: justify;
  position: relative; /* enables robust prefix formatting if needed */
}

.vit-para p.main::before {
  content: "(" counter(mainpara) ") ";
  font-weight: bold;
  margin-right: 6px;
}

/* Subparagraphs: (a), (b), (c) ... with hanging indent */
.vit-para p.sub {
  counter-increment: subpara;
  margin-bottom: 8px;
  text-align: justify;

  /* Hanging indent pattern: reserves space for the prefix */
  padding-left: 2.2em;     /* adjust to your prefix width */
/*  text-indent: -2.2em;      pull first line left so prefix appears in the left gutter */
}

.vit-para p.sub::before {
  content: "(" counter(subpara, lower-alpha) ") ";
  font-weight: bold;
  display: inline-block;
  width: 2em;              /* matches padding-left (slightly less than 2.2em) */
}
.hanging-indent {
  text-indent: -2em;       /* Pull first line left */
  padding-left: 2em;       /* Push rest of lines right */
  margin-bottom: 12px;     /* Optional spacing between paragraphs */
  text-align: justify;     /* Optional: clean alignment */
}

/* =========================
   Global navigation + layout
   ========================= */

.site-header {
  padding: 0;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.1rem 1rem;
}

.header-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.site-title {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.1;
}

.topnav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .75rem 1rem;
}

.topnav a {
  display: inline-block;
  text-decoration: none;
  padding: .45rem .7rem;
  border-radius: .6rem;
}

.topnav a:hover {
  text-decoration: underline;
}

.topnav a.active {
  font-weight: 700;
  text-decoration: underline;
}

/* Page shell: sidebar + content */
.page-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.page-shell.no-sidebar {
  grid-template-columns: 1fr;
}

.sidebar {
  border: 1px solid #ddd;
  border-radius: .9rem;
  padding: 1rem;
  background: #fff;
  position: sticky;
  top: 1rem;
}

.sidebar-title {
  margin: 0 0 .75rem 0;
  font-size: 1rem;
  font-weight: 700;
}

.sidebar a {
  display: block;
  text-decoration: none;
  padding: .35rem .4rem;
  border-radius: .5rem;
}

.sidebar a:hover {
  text-decoration: underline;
}

.sidebar a.active {
  font-weight: 700;
  text-decoration: underline;
}

.page-main {
  min-width: 0; /* prevents overflow in long code blocks etc. */
}

/* Mobile: stack sidebar on top */
@media (max-width: 900px) {
  .page-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
  }
}
/* Feedback UI */
.feedback-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid #999;
  background: #fff;
}

.feedback-footer-prompt{
  margin: 10px 0 6px 0;
  font-size: 0.95rem;
}

.page-report-link{
  text-decoration: underline;
  font-weight: 700;
}

.feedback-card{
  max-width: 760px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.fb-label{
  display:block;
  margin-top: 12px;
  font-weight: 700;
}

.fb-input{
  width: 100%;
  padding: 10px;
  border: 1px solid #bbb;
  border-radius: 8px;
  margin-top: 6px;
}

.fb-static{
  padding: 10px;
  border: 1px dashed #bbb;
  border-radius: 8px;
  margin-top: 6px;
  word-break: break-word;
}

.fb-submit{
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #999;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}