@font-face {
  font-family: 'KH Teka';
  src: url('../assets/fonts/KHTeka-Regular.otf') format('otf'),
       url('../assets/fonts/KHTeka-Bold.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}

/* Global font and typography */
html {
  font-size: 16px !important;
}
body {
  font-family: 'kh-teka', sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1.5em !important;
  font-style: normal;
  letter-spacing: 0em;
}

/* Headings */
h1, h2, h3, h4 {
  line-height: 1.2em !important;
  font-weight: 500 !important;
  font-style: normal;
  letter-spacing: -0.02em !important;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
h1 { font-size: 2.6rem !important; } /* Equivalent to h1 in Squarespace */
h2 { font-size: 2.0rem !important; } /* Equivalent to h3 (not h2 !) in Squarespace */
h3 { font-size: 1rem !important;     /* Equivalent to h4 (not h3 !) in Squarespace */
      font-weight: bold !important;}
/* Note that Squarespace heading size h2 is the same as Squarspace size h1, making it redundant to include a Squarespace h2 equivalent here, since it's visually not unique. So what's included becomes offset vs. Squarespace */

/* Paragraphs; default paragraph style, equivalent to p2 in Squarespace */
p {
  font-size: 0.9rem !important;
  line-height: 1.5em !important;
  font-weight: 400 !important;
  font-style: normal;
  letter-spacing: 0em;
  margin-bottom: 1em;
}

/* New paragraph style with larger font size, equivalent to p1 in Squarespace */
p.large-paragraph {
  font-size: 1.4rem !important;
}

/* Apply the default paragraph styles to list items (both ordered and unordered lists) */
ul, ol, li {
  font-size: 0.9rem !important;  /* Same as default paragraph font size */
  line-height: 1.5em !important;
  font-weight: 400 !important;
  font-style: normal;
  letter-spacing: 0em;
}

/* Apply the small paragraph style to list items with the small-paragraph class */
ul.large-paragraph, ol.large-paragraph, li.large-paragraph {
  font-size: 1.4rem !important;  /* Adjust to your smaller size */
}

/* Adjust spacing after h1 (Installation heading) */
h1 {
  margin-bottom: 0em !important;  /* Reduce bottom margin of h1 */
}

/* Add more space at the bottom of the page */

/* Adjust bottom margin of the content area */
.md-content {
  margin-bottom: 8em !important; /* Add margin at the bottom of the content */
}

/* Ensure there's no unwanted overlap with footer */
.md-footer {
  margin-top: 2em !important;  /* Add some spacing between content and footer */
}

/* Adjust table font size to match standard paragraph font size */
table {
  font-size: 0.9rem !important;  /* Match the font size for the paragraphs */
  font-family: 'kh-teka', sans-serif !important;  /* Ensure consistent font family */
}

table td, table th {
  font-size: 0.9rem !important;  /* Ensure font size is consistent across cells */
}

/* Remove unnecessary borders and adjust table styling */
table {
  border-collapse: collapse;  /* Ensure borders are collapsed and not double-bordered */
  width: 100%;  /* Make the table span the full width */
  border-top: none !important;  /* Remove the top border */
  border-bottom: none !important;  /* Remove the bottom border */
  border-left: none !important;  /* Remove the left side border */
  border-right: none !important;  /* Remove the right side border */
}

table th, table td {
  border-left: none !important;  /* Remove the left side border */
  border-right: none !important;  /* Remove the right side border */
  border-top: none !important;  /* Remove the top border */
  border-bottom: none !important;  /* Remove the bottom border */
  padding: 0.5rem !important;  /* Add some padding for readability */
  text-align: left;  /* Align text to the left for consistency */
}

table th {
  background-color: #ffffff;  /* Optional: Light background color for the header */
  font-weight: bold;  /* Optional: Make header text bold */
  border-bottom: 2px solid black !important;  /* Add black bold solid border under header */
}

table tr:nth-child(even) {
  background-color: #f9f9f9;  /* Optional: Alternate row shading for readability */
}

/* Navigation typography */
.md-header__title,
.md-nav__title,
.md-nav__item .md-nav__link {
  font-family: 'KH Teka';
  font-size: 0.9rem !important;
}

/* Style all parent nav links (section headings like "Worked Examples") */
.md-nav__item--nested > .md-nav__link {
  font-weight: bold !important;
  color: #000000 !important;
}

h1 {
  color: #000000 !important;
}

/* Sidebar width control */
@media screen and (min-width: 1220px) {
  .md-grid {
    grid-template-columns: 20rem 1fr 15rem; /* ⬅️ adjust widths as needed */
  }

  .md-sidebar--primary {
    width: 20rem; /* Ensure sidebar respects the new width */
  }
}

/* Ensure mobile navigation shows all items */
@media screen and (max-width: 1219px) {
  .md-nav__list {
    display: block !important;
  }
  
  .md-nav__item {
    display: block !important;
  }
  
  /* Ensure nested navigation items are visible */
  .md-nav__item--nested .md-nav__list {
    display: block !important;
  }
  
  
  .md-overlay {
    z-index: 1000 !important;
    pointer-events: none !important; /* Allow clicks through overlay */
  }
  
  .md-nav--primary {
    z-index: 1200 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 85% !important;
    height: 100vh !important;
    background-color: white !important;
    box-shadow: 2px 0 15px rgba(0,0,0,0.3) !important;
    overflow-y: auto !important;
    pointer-events: auto !important; /* Enable clicks on navigation */
    transform: translateX(-100%) !important; /* Start hidden */
    transition: transform 0.3s ease !important;
  }
  
  /* Show navigation when drawer is checked */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-nav--primary {
    transform: translateX(0) !important; /* Slide in */
  }
  
  /* Completely hide header on mobile */
  .md-header {
    z-index: 500 !important;
  }
  
  /* Hide header when burger menu is open */
  [data-md-toggle="drawer"]:checked ~ .md-container .md-header {
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease !important;
  }
  
  /* Style the navigation drawer content */
  .md-nav--primary .md-nav__list {
    background-color: white !important;
    padding: 2rem 1rem !important;
    margin: 0 !important;
    min-height: 100vh !important;
  }
  
  /* Make sure navigation items are clickable */
  .md-nav--primary .md-nav__link {
    pointer-events: auto !important;
    display: block !important;
    padding: 0.5rem 0 !important;
    color: #000000 !important;
  }
}

/* Header layout */
.md-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: auto !important;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  margin-bottom: 0 !important;
  background-color: #ffffff !important;
}

.md-header__inner {
  display: flex !important;
  flex-direction: row !important;     /* ← horizontal layout */
  align-items: center !important;     /* ← align items vertically centered */
  justify-content: space-between;     /* ← space between logo and search */
  gap: 175px;                           /* ← optional spacing between logo and search */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}
.md-header-nav {
  padding-bottom: 12px !important;
}
.md-header-nav__list {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.md-header-nav__item {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.md-header-nav__link,
.md-header__option,
.md-header__button,
.md-header-nav__source,
.md-header__title {
  color: #000000 !important;
}

/* Top navigation tabs */
.md-tabs {
  position: static !important;
  background: none !important;
  box-shadow: none !important;
  padding-top: 12px;
  padding-bottom: 12px;
}
.md-tabs__list {
  color: #000000 !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
  padding-left: 16px;
}
.md-tabs__link--active {
  color: #000000 !important;
  font-weight: bold !important;
}

/* Top nav bar tab font size */
.md-tabs__link {
  font-size: 0.9rem !important;
}

/* Hover effects */
.md-footer__link:hover,
.md-search__icon:hover {
  color: #b8aea7 !important;
}
.md-nav__link {
  padding: 2px 0;   /* This px value adjusts the vertical padding between the left sidebar links */
}

/* Hover effect for TOC links */
.md-nav__link:hover {
  color: #00c34e !important; /* Green on hover */
  text-decoration: none; /* Optional: Remove underline on hover */
}
/* Hover effect for headings */
h1:hover, h2:hover, h3:hover, h4:hover {
  color: #00c34e !important; /* Green on hover */
  cursor: pointer; /* Show pointer cursor to indicate it's clickable */
}
/* Enable smooth scrolling */
html {
  scroll-behavior: smooth;
}


/* Brand theme colors */
:root > * {
   --md-primary-fg-color: #00c34e;
   --md-primary-fg-color--light: #f2f2f2;
   --md-primary-fg-color--dark: #000000;
   --md-accent-fg-color: #00c34e;  /* stops the blue pressed/active state */
}


/* Code block copy button */
pre button.md-clipboard {
  color: black;
  background-color: none;
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  padding: 0.3em 0.6em;
  top: auto;
  bottom: 0.5rem;
  right: 0.5rem;
  opacity: 0.8;
  transition: all 0.2s ease-in-out;
}
pre button.md-clipboard:hover {
  color: #00c34e;
  opacity: 1;
  transform: scale(1.05);
  cursor: pointer;
}


/* Search styling */
.md-search__input:focus {
  background-color: #ffffff !important;
  border-color: #b8aea7 !important;
}
.md-search__input::placeholder {
  color: #000000 !important;
}
.md-search__icon {
  color: #000000 !important;
}
.md-search__form {
  background-color: #ffffff !important;
  border-radius: 0px;
}

/* Tabbed content */
.md-typeset .tabbed-set > input:checked + label {
  color: #00c34e;
  border-bottom: 2px solid #00c34e;
}
.md-typeset .tabbed-label {
  border-bottom: 2px solid transparent;
}

/* Permalink icon */
.md-typeset .headerlink {
  color: #b8aea7 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.md-typeset .headerlink:hover,
.md-typeset .headerlink:focus,
.md-typeset h1:hover .headerlink,
.md-typeset h2:hover .headerlink,
.md-typeset h3:hover .headerlink,
.md-typeset h4:hover .headerlink,
.md-typeset h5:hover .headerlink,
.md-typeset h6:hover .headerlink {
  opacity: 1;
  visibility: visible;
}

/* Widen the content area, and apply it only on large screens*/
@media screen and (min-width: 1220px) {
  .md-container {
    display: flex;
    justify-content: center;
  }

  .md-main {
    width: 100%;
    max-width: 100%;    /* Must leave this at 100% in order for the content to be centered horizontally on the screen */
  }

  .md-content {
    max-width: none; /* Remove max-width constraint for full width */
    width: 100%;
  }

  .md-grid {
    max-width: 100%;
    width: 95%;          /* Change the actual width of the middle content & makes the layout responsive */
  }

  .md-main__inner {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md-sidebar--primary {
    width: 18rem; /* Slightly narrower sidebar */
  }

  .md-sidebar--secondary {
    width: 12rem; /* Narrower right sidebar/TOC */
  }
}

/* Override top nav tab color when active */
.md-tabs__link--active {
  color: #00c34e !important;
}

/* extra.css */
.md-footer {
  background-color: #000000 !important;  /* Black background */
  color: #ffffff !important;  /* White text */
  padding: 2em 0 !important;  /* Add padding to give the footer height */
  text-align: center;  /* Center text */
  display: flex;
  justify-content: center;
  align-items: center;
}

.md-footer-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Ensure the footer takes full width */
}

.md-footer-meta__inner {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: center;
  align-items: center;
  width: 100%; /* Ensure content is centered */
}

.md-copyright {
  width: 100%;
  display: flex;
  justify-content: center;  /* Center the copyright text */
  padding-left: 1em;  /* Add padding to bring it closer to center */
  color: #ffffff !important;  /* Explicitly set white color for copyright */
}

.copyright-text {
  margin: 0; /* Remove any margin from the copyright text */
}

.footer-info {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center the address and company name */
  margin-top: 0.5em; /* Small gap between the copyright and address */
}

.md-footer a {
  color: #ffffff !important;  /* White links */
  text-decoration: none !important;  /* Remove underline from links */
}

/* Change the border color for admonitions */
.admonition.note {
    border: 2px solid #000000 !important;  /* Set a green border all around the admonition */
    border-radius: 4px !important;  /* Optional: round the corners */
}

/* Change the border color for admonitions */
.admonition.tip {
    border: 2px solid #000000 !important;  /* Set a green border all around the admonition */
    border-radius: 4px !important;  /* Optional: round the corners */
}

/* Customize tip box */
.admonition.tip {
  background-color: #ffffff !important;  /* Box main region background color */
  border: 2px solid black !important;  /* Border color */
  color: #000000 !important;  /* Black text */
  padding-left: 1em !important;  /* Optional: ensure there's still space on the left side */
}

.admonition.tip .admonition-title {
  color: #000000 !important;  /* Title text */
  background-color: #f2f2f2 !important; /* The header color behind the title text */
}

.admonition.tip p {
  color: #000000 !important;  /* Black body text */
}

/* Customize note box */
.admonition.note {
  background-color: #ffffff !important;  /* Box main region background color */
  border: 2px solid black !important;  /* Border color */
  color: #000000 !important;  /* Black text */
  padding-left: 1em !important;  /* Optional: ensure there's still space on the left side */
}

.admonition.note .admonition-title {
  color: #000000 !important;  /* Title text */
  background-color: #f2f2f2 !important; /* The header color behind the title text */
}

.admonition.note p {
  color: #000000 !important;  /* Black body text */
}

/* Adjust syntax highlighting for MATLAB code blocks */
.highlight .hll { background-color: #ffff99; }  /* Highlight current line */
.highlight .c { color: rgb(2, 128, 9); }  /* Comment color */
.highlight .k { color: rgb(14, 0, 255); }  /* Keyword color */

/* ----------------------------------------------------------------------------
  Splash page hero image
  ----------------------------------------------------------------------------
*/

/* Hero wrapper: just spacing + centering */
.hero {
  margin: 1.5rem 0 2.5rem;
  display: flex;
  justify-content: center;
}

/* Hero image styling */
  /* height: auto; */
.hero-image {
  width: 100%;
  max-width: 1100px;
  height: auto;

  /* New lines to reduce perceived height */
  max-height: 500px;          /* adjust this number until it feels right */
  object-fit: cover;          /* crops the image instead of shrinking it */
  object-position: center;    /* centers the cropped area */

  border-radius: 1rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  display: block;
}

/* ----------------------------------------------------------------------------
  Rules: syntax highlighting
  ----------------------------------------------------------------------------
*/

/* Code block */
.highlight {

  /* Operators */
  :is(.o, .ow) {
    color: #000000 !important;
  }

  /* Punctuation */
  .p {
    color: #000000 !important;
  }

  /* Literal strings and associated types */
  :is(.cpf, .l, .s, .sb, .sc, .s2, .si, .s1, .ss) {
    color: rgb(170, 4, 249) !important;
  }

  /* Special literal strings */
  :is(.cp, .se, .sh, .sr, .sx) {
    color: rgb(170, 4, 249) !important;
  }

  /* Numbers */
  :is(.m, .mb, .mf, .mh, .mi, .il, .mo) {
    color: #000000 !important;
  }

  /* Keywords */
  :is(.kd, .kn, .kp, .kr, .kt) {
    color: #000000 !important;
  }

  /* Constants and Names */
  :is(.kc) {
    color: #000000 !important;
  }


/* THIS ONE */

    /* Constants and Names */
  :is(.n) {
    color: rgb(170, 4, 249) !important;
  }

  /* Constants (Name related) */
  :is(.no, .nb, .bp) {
    color: #000000 !important;
  }

  /* Functions and Names */
  :is(.nc, .ne, .nf, .nn) {
    color: #000000 !important;
  }

  /* Name related types */
  :is(.nd, .ni, .nl, .nt) {
    color: #000000 !important;
  }

  /* Comments */
  :is(.cm, .c1, .ch, .cs, .sd) {
    color: #000000 !important;
  }

  /* Variables */
  :is(.na, .nv, .vc, .vg, .vi) {
    color: #000000 !important;
  }

  /* Generic types */
  :is(.ge, .gr, .gh, .go, .gp, .gs, .gu, .gt) {
    color: #000000 !important;
  }
}

/* Hide the header title globally - i.e. on all pages, to avoid superfluous presentation of "Home" or "Documentation" wording */
.md-header__title {
  display: none !important;
}

/* Disable link-like hover and pointer on product titles */
/* overrides Material’s built-in card hover behaviour, removing; green hover color, hand pointer, any invisible underline/text decoration for the product cards on splash screen */
.grid.cards .product-card h3:hover,
.grid.cards .product-card h2:hover,
.grid.cards .product-card h4:hover,
.product-links h2:hover,
.product-links h3:hover,
.product-links h4:hover,
.md-content__inner > h2:hover {
  color: inherit !important;
  cursor: default !important;
}

/* Disable ALL heading hover only on the homepage */
/* [data-md-source="index.md"] h1:hover,
[data-md-source="index.md"] h2:hover,
[data-md-source="index.md"] h3:hover,
[data-md-source="index.md"] h4:hover {
  color: inherit !important;
  cursor: default !important;
} */

/* ----------------------------------------------------------------------------
  Homepage: responsive cards + product-page links
  ---------------------------------------------------------------------------- */

/* Make each product card look like a tile */
.grid.cards .product-card {
  display: block;
  padding: 1.5rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;

  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: var(--md-shadow-z1);

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.grid.cards .product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--md-shadow-z3);
  border-color: var(--md-accent-fg-color);
}

/* Tidy up heading + body spacing inside cards */
.grid.cards .product-card h2,
.grid.cards .product-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.grid.cards .product-card p {
  margin: 0;
}

/* Make the three cards into a responsive grid */
.grid.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;

  /* NEW: constrain and center the whole card group */
  max-width: 1200px;
  margin: 0 auto 2.5rem; /*top margin | horizontal centering set to auto | bottom margin */

  /*center the card group inside the parent page container */
  justify-content: center;
}

/* Whole card is clickable */
.grid.cards .product-card {
  display: block;
  padding: 1.5rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: inherit;

  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: var(--md-shadow-z1);

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    border-color 150ms ease,
    background-color 150ms ease;
}

.grid.cards .product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--md-shadow-z3);
  border-color: var(--md-accent-fg-color);
}

/* Layout inside the card: icon left, text right */
.product-card-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

/* Icon sizing */
.product-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
}

/* Tidy up text spacing */
.product-card-body h3 {
  margin: 0 0 0.4rem 0;
}

.product-card-body p {
  margin: 0;
}