.reveal h1,
.reveal h2,
.reveal h3 {
	text-wrap: balance;
	text-align: center;
}

.reveal ul {
	font-size: 0.9em;
	line-height: 1.4;
}

.reveal section img {
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Ensure slide content is centered */
.reveal .slides section {
	text-align: center;
}

/* Centers all images in slides without !important */
.reveal .slides section img.responsive-img {
	display: block;
	margin: 1rem auto;
	float: none;
}

/* Safety to prevent oversizing on smaller screens */
.reveal .slides section img {
	max-width: 100%;
	height: auto;
}

.slides section[class^="sec-"] {
	/* marker hook per section if you want later styling */
}

.indent {
	padding-left: 2em;
}


.shrink-font {
	font-size: 30px !important;
}

.shrink-min-font {
	font-size: 20px !important;
}

.no-bullets {
	list-style-type: none;
}

b {
	text-decoration: underline;
	color: red;
}

.br-half::after {
	content: "";
	display: block;
	margin-bottom: 0.5em;
}

.responsive-iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	margin: 1rem auto;
}

.responsive-img {
	width: 80%;
	height: auto;
	display: block;
	margin: 1rem auto;
}


/* Title styling */
.slide-subtitle {
	text-align: center;
	/* centers the title */
	font-size: 1.5rem;
	/* adjust size as needed */
	font-weight: bold;
	/* makes it stand out */
	margin-bottom: 0.5rem;
	/* space between title and image */
}

/* Smaller variation for slides that need narrower images */
.small-img {
	width: 35%;
}

.mid-img {
	width: 75%;
}

.small-code {
	font-size: 10px !important;
}

/* Round border effect for slides */
.reveal .slides section {
  border: 4px solid #ccc;   /* subtle gray border */
  border-radius: 20px;      /* makes it rounded */
  padding: 20px;            /* some inner spacing */
  box-sizing: border-box;   /* ensures padding doesn’t mess with layout */
}




/* Styled operator precedence table */
table.code-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  margin: 1em 0;
  font-size: 0.95em;
}

table.code-table th {
  background-color: #1ca3ec;  /* teal-blue header */
  color: white;
  text-align: left;
  padding: 10px;
}

table.code-table td {
  border: 1px solid #ddd;
  padding: 8px 12px;
}

table.code-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

table.code-table tbody tr:hover {
  background-color: #f1f7ff;
}











/* Each list item is the positioning context */
.hover-popup {
  position: relative;   /* now popup anchors to the li */
  cursor: pointer;
  display: inline-block; /* shrink to fit li text width */
}

/* Popup wrapper */
.popup-code {
  display: none;
  position: absolute;
  top: 100%;     /* directly below the li */
  left: 0;       /* aligned to left edge of li */
  z-index: 9999;
  margin-top: 8px;
}

/* Popup content box */
.popup-code pre {
  background: #1e1e1e;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: monospace;
  position: relative;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  white-space: pre;
}

/* Tooltip arrow */
.popup-code pre::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #1e1e1e transparent;
}

/* Show popup when hovering li */
.hover-popup:hover .popup-code {
  display: block;
}

/* Animated highlight */
.branch-true,
.branch-false {
  font-weight: bold;
  animation: pulseHighlight 1.2s infinite alternate;
}
.branch-true { color: #00ff7f; }
.branch-false { color: #ff6347; }

@keyframes pulseHighlight {
  from { background-color: rgba(255,255,255,0.1); }
  to   { background-color: rgba(255,255,255,0.3); }
}