/* ************** Default Styles ****************** */
/* from http://www.w3.org/TR/CSS2/sample.html */
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: 'Roboto Mono', 'Lucida Console', 'Courier New', 'monospace'; }
pre             { white-space: pre }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-collapse: collapse;}
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted; }
/* end of default styles */
/* ************** Reset & Base Styles ******************** */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Roboto, system-ui,  "Segoe UI", Arial, sans-serif;
    line-height: normal;
    background-color: #888;
    counter-reset: figures;
	counter-reset: tables;
}

/* Page Container */
#page {
    display: flex;
    flex-direction: column;
   /* min-height: 100vh; */
    max-width: 90ch;
    margin: 0 auto;
}

/* ************************ Header & Nav Layout ***************************** */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: gainsboro;
    position: relative;
    border-top: 1px gray solid; border-radius: 10px 10px 0 0;
    margin-bottom: 0;
}

.logo {
    font-size: 1.2rem;
    font-weight: bold;
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav ul li {
    margin-left: 1.5rem;
}

.main-nav ul li a {
    text-decoration: none;
    font-size: 1rem;
/*    transition: color 0.3s; */
}

/* Hamburger Base Styles (Hidden by default) */
.menu-toggle {
    width: 90px; height: 50px; 
    position: absolute; right: 0;
    z-index: 100;
    cursor: pointer;
    display: block;
    opacity: 0;
}

.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Main Content & Footer */
.content {
    flex: 1;
    padding: 3rem 2rem;
    background-color: #f4f4f4;
    min-height: 90vh;
    border: 1px solid gray;
}

footer, .site-footer {
    font-size: 80%;
    line-height: 1.2;
    background-color: gainsboro;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: auto;
    border-bottom: 1px solid gray;
    border-radius: 0 0 10px 10px;
}
pre.code {font-size: 90%;}
/* *************************** Tool tips *************** */
/* ************ This code is also in tbc.css *********** */
.tooltip-container {
  display: inline-block;
  anchor-scope: --tooltip-anchor;
}

.tooltip {
  position: fixed;
  position-anchor: --tooltip-anchor;
  position-area: bottom center;
  margin-top: 20px; /* Gives it a slight gap below the button */
  position-try-fallbacks: flip-block, flip-inline;
  width: 200px;
  padding: 10px;
  z-index: 25;
  border: 1px solid gray;
  border-radius: 10px;
  background-color: #ffffcc;
  box-shadow: 10px 10px 5px #888888;
  color: black;
  text-align: center;

  /* Animation states */
  visibility: hidden; 
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s;
  transition-behavior: allow-discrete;
}

/* use the pseudo-element to inject the text */
.tooltip::before {
  content: attr(data-text);
  display: block;
}

.tooltip-container:hover .tooltip {
  visibility: visible; 
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}


/* ****************** Main Markup  and Style ********************************* */
.bold {font-weight: bold;}
.center {text-align: center;}
figure .center {margin: 0 auto; border: 1px solid black;}
.code {
    font-family: 'Roboto Mono', 'Lucida Console', 'Courier New', 'monospace';
    max-width: 100%; 
    overflow-x: auto;
    padding: 0.5em; border: 1px solid gray; border-radius: 5px; 
    margin: 0 auto 1em auto; background-color: #eee;
    position: relative;
}
.ilc {  /* inline code */
    font-family: 'Roboto Mono', 'Lucida Console', 'Courier New', 'monospace';
    font-size: 90%; background-color: #dcdcdc;
}
.copyIcon {
    position: absolute;
    top: 5px; /* Distance from the top edge */
    left: 5px;  /* Distance from the left edge */
    width: 16px;  /* Adjust size as needed */
    height: 16px;
    cursor: pointer;
}
.example  {max-width: 100%; 
    overflow-x: auto;
    padding: 0.5em; border: 1px solid gray; border-radius: 5px; 
    margin: 0 auto 1em auto; background-color: #eee;
    position: relative;
    }
 .diagram {max-width: 100%; 
    overflow-x: auto;
    padding: 0.5em; 
    margin: 0 auto 1em auto; 
    position: relative;
}
h1 {text-align: center; font-weight: bold; 
	font-size: 105%;
    margin-top: 1rem;
}
h2 {text-align: left; font-size: 100%; 
    margin-top: 0.5rem;
	font-style: italic;
}
.hidden {visibility: hidden;}
.left {float: left; margin: 0.5em  0.5em 0.5em 0; border: 1px solid black;}
li {margin-top: 0.5rem;}
p {
    margin-top: 1rem;
}

.right {float: right; margin: 0.5em 0 0.5em 0.5em; border: 1px solid black;}
.sc {
    font-variant: small-caps;
}
.tt {font-family: 'Roboto Mono', 'Lucida Console', 'Courier New', 'monospace';}

/* ****************** Markup for documentation *************** */
.gray {color: #767676;}
.hanging {
    margin-top: 0px;
    margin-bottom: 0px;
    text-indent: -2em;
    margin-left: 2em;
}
.rtl 	{color: black; background-color: white; border: 1px solid black; border-radius: 8px;
		position: absolute; left: 220px; padding: 2em; width: 400px;  /* top: is set with JavaScript */
		display: none;
		box-shadow: 10px 10px 5px #888888;}
.rtl p {font-size: 75%;}
.rtl table {border-spacing: 1em 0; border-collapse: separate;}
.rtl td {text-align: left; vertical-align: middle;}
.rtl td.cycle {text-align: right;}
.rtl th {text-align: center; font-weight: bold;}
table.uprog {margin: auto}
.uprog td {text-align: center; vertical-align: middle;}
.uprog td.mal {text-align: left; vertical-align: middle; width: 175px;}
.uprog th {text-align: center; font-weight: bold;}
.opcodeTbl {width: 95%; margin: 0 auto;}
.opcodeTbl th {text-align: left; font-weight: bold;}
.grid {
  display: table; border-spacing: 1em 0; border-collapse: collapse; margin-right: 1em; border: 1px solid gray; float: left;
}
.grid-row {
  display: table-row; text-align: center;
}
.grid-cell {
  display: table-cell; padding: 0 0.25em; border: 1px solid gray; vertical-align: top;
}
.sc {font-variant: small-caps;}
table.alu {border-spacing: 1em 0; border-collapse: collapse; margin-right: 1em; border: 1px solid gray; float: left;}
table.alu th, td {padding: 0 0.25em; border-collapse: collapse; border: 1px solid gray;}
th.mnemonic {width: 120px;}
th.busctrl {border-bottom: 1px solid gray;}
tr.opcodes {text-align: left; vertical-align: top;}
tr.opcodes td {padding-bottom: 0.5em;}
figure {counter-increment: figures;} /* "display: table" allows figure to expand to width of content, forces text wrap. */
figure figcaption::before {
    content:"Figure " counter(figures) ". ";}
figcaption {font-size: 85%; font-style: italic; padding: 0.5em;}
figure.center {margin: 0 auto; border: 1px solid black;}
h1 {font-size: 180%; font-weight: bold; text-align: center; margin-bottom: 0.2em;}
h2 {font-size: 120%; font-weight: bold; text-align: left; font-style:italic;}
h3 {font-size: 110%; text-align: left;}
img.closer {position: absolute; top: 8px; right: 8px; cursor: pointer; overflow: visible;}
.italic {font-style: italic;}
.printonly {display:none;}
.printBlock {display:none;}
select {min-width: 120px;}
table {text-align: center; vertical-align: middle;}
table.uprog {border: 1px solid gray; table-layout: fixed;}
table.uprog th {vertical-align: top; border-right: 1px solid gray;}
.toc {list-style-type: none;}
/* http://dabblet.com/gist/4072362 */
/* http://jsfiddle.net/SLkfR/ */
.vertical-text {
    transform:  rotate(90deg);
	font-size: 80%;
	display: inline-block;
	overflow: visible;
	width: 1.2em;
	line-height: 4.4em;
	margin-top: -1.3em;
	white-space: nowrap;
}
/* ********************************** Back to Top Button ******************************* */
/* Enable smooth scrolling across the entire document */
html {
  scroll-behavior: smooth;
}

/* Base button styling style */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  left: 0; /* JavaScript will override this value dynamically */
  right: auto !important; /* Force browser to ignore right alignment overrides */
  z-index: 9999;
  
  /* Meet mobile touch targets (min 48px) */
  min-width: 48px;
  min-height: 48px;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  
  /* Flex layout to align icon and text */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  
  /* Smooth visual transitions */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
  outline: 6px solid #FBF719;
}

/* State class added by JavaScript when user scrolls down */
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
}


/* Subtle hover and focus states for desktop users and keyboard navigators */
.back-to-top:hover,
.back-to-top:focus-visible {
  transform: translateY(-2px);
  outline-offset: 2px;
}

/* Active pressing state */
.back-to-top:active {
  transform: translateY(0);
}

/* Respect users who prefer reduced motion (Accessibility) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .back-to-top {
    transition: none;
  }
}
.mobile {display: none;} 
.desktop {display: inline;}
/* ****************************Responsive Breakpoint (Under 768px) ********************* */
@media (max-width: 768px) {
    .mobile {display: inline;}  /* Items that display in only one context */
    .desktop {display: none;}
    .hamburger {
        display: flex;
        z-index: 50;
    }
    .main-nav {
        position: absolute; z-index: 50;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: gainsboro;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease-in-out;
    }
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        padding: 1rem 0;
    }
    .main-nav ul li {
        margin: 1rem 0;
    }
    /* Toggle Logic to Open Menu */
    .menu-toggle:checked ~ .main-nav {
        max-height: 300px; /* Adjust height based on content */
    }
    /* Hamburger Animation to 'X' */
    .menu-toggle:checked + .hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .menu-toggle:checked + .hamburger span:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle:checked + .hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    .rtl 	{color: black; background-color: white; border: 1px solid black; border-radius: 8px;
		position: absolute; left: 10px; padding: 2em; width: 85%; z-index: 99;
		display: none; box-sizing: border-box;
		box-shadow: 10px 10px 5px #888888;}
} /* end of max-width */

@media print {
	a:link          {color: black; text-decoration: none}
	a:active        {color: black; text-decoration: none;}
	a:visited       {color: black; text-decoration: none;}
	a.showurl:after {content:" [" attr(href) "] "; }  /* Doesn't work in IE 6 */
	body {background: #ffffff; 
		color: black; 
		margin: 0px; /* The standard margins are right when printing */
		font-size: 12pt;
		font-family: "Times New Roman", Times, serif; 
	}
	
	div#main {width: 100%;  max-width: none; border: none;}
	h1 {text-align: center; font-weight: bold; 
		font-family: Roboto, system-ui,  "Segoe UI", Arial, sans-serif;
		font-size: 105%;}
	h2 {text-align: center; font-size: 100%; 
	   font-family:Roboto, system-ui,  "Segoe UI", Arial, sans-serif;
	   font-style: italic;
	   display: inline;
	}
    .hamburger {display: none;}
    header {display: none;}
    .main-nav {display: none;}
	p.author {font-size: 8pt;}
	pre.code {font-size: 10pt; margin-left: 50px;
			 font-family:  'Roboto Mono', 'Lucida Console', 'Courier New', 'monospace';}
	.ilc {font-size: 10pt; font-family:  'Roboto Mono', 'Lucida Console', 'Courier New', 'monospace';}
	.nonprinting {display: none ! important;}
	.printonly {display: block;}
    .printBlock {display:block;}
}
/* Fonts */
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v51-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v51-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-v51-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v51-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-v51-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-mono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-mono-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-mono-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-mono-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}