/* ==================== Unified Bottom Controls (MUI icons) ==================== */

/* Load Material Symbols (MUI) */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

/* Root defaults */
:root {
  --user-font-scale: 1;
  --fab-bottom: 56px;
}

/* === Force MkDocs Material default text size === */
.md-typeset {
  font-size: calc(0.8rem * var(--user-font-scale, 1)) !important;
}

/* === LEFT CLUSTER (Left menu toggle) === */
.bottom-controls-left {
  position: fixed;
  left: 1.5rem;
  bottom: var(--fab-bottom);
  z-index: 999;
  display: flex;
}

/* === RIGHT CLUSTER (Right TOC toggle + Font controls) === */
.bottom-controls {
  position: fixed;
  right: 1.5rem;
  bottom: var(--fab-bottom);
  z-index: 999;
  display: flex;
  gap: 0.25rem;
}

/* === Shared button look === */
.bottom-controls .ctrl,
.bottom-controls-left .ctrl {
  background: #0f172a;
  color: #fff;
  border: none;
  border-radius: 0.3rem;
  width: 1.2rem;
  height: 1.2rem;
  line-height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1.5px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease;
  padding: 0;
}
.bottom-controls .ctrl:hover,
.bottom-controls-left .ctrl:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.bottom-controls .ctrl[aria-pressed="true"],
.bottom-controls-left .ctrl[aria-pressed="true"] {
  opacity: 0.9;
}

/* === MUI Icon styling === */
.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  font-size: 0.9rem; /* Adjust to fit your button size */
  line-height: 1;
}

/* === Hide sidebars when toggled === */
body.hide-left  .md-sidebar--primary   { display: none !important; }
body.hide-right .md-sidebar--secondary { display: none !important; }

/* === Expand grid when a sidebar is hidden === */
body.hide-left .md-main__inner {
  grid-template-columns: minmax(0, 1fr) var(--md-sidebar-width, 14rem) !important;
}
body.hide-right .md-main__inner {
  grid-template-columns: var(--md-sidebar-width, 14rem) minmax(0, 1fr) !important;
}

/* === Hide on homepage === */
html.home-page .md-footer,
html.home-page .bottom-controls,
html.home-page .bottom-controls-left {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Remove any old buttons */
.font-buttons,
.menu-toggle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ================================================================= */
/* ===== Compact Footer: bottom image strip + reduced height ===== */

:root {
  --footer-bg-image: url("/assets/home-bg.png");
  --footer-darken: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.15));
}

/* Base footer container */
html:not(.home-page) .md-footer {
  position: relative;
  background: transparent !important;
  border-top: none !important;
  box-shadow: none !important;
  overflow: hidden;
  padding: 0 !important;
  min-height: 2rem; /* reduce default height */
}

/* Apply background only at the bottom */
html:not(.home-page) .md-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--footer-darken),
    var(--footer-bg-image) center bottom / cover no-repeat;
}

/* Reduce nav block padding */
html:not(.home-page) .md-footer-nav {
  padding: 0.5rem 1rem !important;
  min-height: 2.5rem !important;
}

/* Reduce link area spacing and font size */
html:not(.home-page) .md-footer__link {
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  line-height: 1.2 !important;
}

/* Hide meta strip (“Made with Material for MkDocs”) */
.md-footer-meta {
  display: none !important;
}

/* Ensure footer text/buttons stay readable */
html:not(.home-page) .md-footer a {
  color: #e6e6e6 !important;
  text-decoration: none;
}
html:not(.home-page) .md-footer a:hover {
  color: #fff !important;
}

/* === Force smaller footer text globally === */
html:not(.home-page) .md-footer,
html:not(.home-page) .md-footer *,
html:not(.home-page) .md-footer-nav__link,
html:not(.home-page) .md-footer__inner,
html:not(.home-page) .md-footer__title {
  font-size: 0.65rem !important;
  line-height: 1.3 !important;
}


/* === Vorcas for site name (header + drawer) === */
@font-face {
  font-family: "Vorcas";
  src:
    url("/assets/fonts/Vorcas.woff2") format("woff2"),
    url("/assets/fonts/Vorcas.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Keyframes for float motion */
@keyframes floatLetter {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

/* Site name split into letters that float */
.md-header__title .md-ellipsis span {
  display: inline-block;
  font-family: "Vorcas", sans-serif !important;
  color: #f2f6a0 !important;
  animation: floatLetter 4s ease-in-out infinite;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Slightly randomize timing per group */
.md-header__title .md-ellipsis span:nth-child(1),
.md-header__title .md-ellipsis span:nth-child(2),
.md-header__title .md-ellipsis span:nth-child(3) {
  animation-delay: 0s;
}
.md-header__title .md-ellipsis span:nth-child(4),
.md-header__title .md-ellipsis span:nth-child(5),
.md-header__title .md-ellipsis span:nth-child(6) {
  animation-delay: 1.2s;
}


/* make the site title clickable */
.md-header__title .md-ellipsis {
  cursor: pointer;
}

/* Header brand (top-left) */
.md-header__title,
.md-header__title .md-ellipsis {
  font-family: "Vorcas", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               sans-serif !important;
  letter-spacing: .2px;
}

/* Drawer / mobile site title */
.md-nav__title,
.md-nav__title .md-ellipsis {
  font-family: "Vorcas", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               sans-serif !important;
}

/* === Keep Table of Contents in default Material font === */
.md-sidebar--secondary,
.md-nav--secondary,
.md-nav--secondary * {
  font-family: var(--md-text-font, "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
}
.brand-ch {
  display: inline-block;
  animation: brandFloat 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * 80ms);
}

@keyframes brandFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* === Global Search Bar Styling (all pages) === */

.md-search__form {
  background: rgba(255,255,255,.05) !important;
  border-radius: 16px !important;
  border: none !important;
  overflow: hidden;
}

/* Input and icon size adjustments */
.md-search__input {
  color: #000 !important; /* black text */
  font-size: 0.7rem !important;
  line-height: 1.4 !important;
  border-radius: 16px !important;
  
}

/* placeholder ("Search") text */
.md-search__input::placeholder {
  color: #ffffff !important;   /* black placeholder text */
  opacity: 0.7;             /* optional – makes it slightly softer */
}

/* search icon */
.md-search__icon {
  color: #ffffff !important;   /* black icon */
  transform: scale(0.7);
  transform-origin: center;
}

/* padding */
.md-search__inner {
  padding: 0.2rem 1rem !important;
}

/* Prevent repaint flicker on fixed bottom controls */
.bottom-controls,
.bottom-controls-left {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Optional: give the page a little breathing room */
.md-main__inner {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* =========================================== */
/* FORCE NORMAL DEFAULT FONT SIZE EVERYWHERE   */
/* =========================================== */

:root {
  --user-font-scale: 1; /* ensure scale starts at 1 */
}

/* make all typeset areas use Material’s real default (0.8rem) */
.md-typeset {
  font-size: calc(0.8rem * var(--user-font-scale)) !important;
  line-height: 1.6 !important;
}

/* also correct nav + footer just in case they scaled too */
.md-nav,
.md-sidebar,
.md-footer {
  font-size: 0.8rem !important;
}

/* Make embedded PDF fill the visible viewport */
/* Fit PDF to the visible content area (the "middle" column) */
/* ==== Slight zoom-in effect for the embedded Google Drive PDF ==== */

.pdf-embed {
  position: relative;
  width: 100%;
  height: calc(80vh - 200px); /* adjust for header/footer spacing */
  overflow: hidden;
  background: #000;
  border-radius: 6px;
}

/* Zoom in the iframe content slightly */
.pdf-embed > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  transform: scale(1.1);          /* 1.1 = 110% zoom */
  transform-origin: center center;/* keeps it centered */
}

/* Optional: center navigation buttons */
.md-content .md-button {
  display: inline-block;
  margin: 1rem 0.25rem;
  text-align: center;
}