/* -----------------------------------------------------------
   Fonts (Google Fonts import first to avoid FOUC)
----------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Rock+3D&display=swap');


/* -----------------------------------------------------------
   Global colors & backgrounds
----------------------------------------------------------- */
/* Site-wide background and text color */
body {
  background-color: #4A3B2A;
  color: #F5F5F5; /* readable body text */
}

/* Inherit background on all elements to kill stray whites */


/* Header & tabs background */
.md-header,
.md-header__inner,
.md-tabs {
  background-color: #4A3B2A !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: #FFFFFF;
}

/* Links */
a {
  color: #FFD580;
  text-decoration: none;
}

a:hover {
  color: #FFB347;
  text-decoration: underline;
}


/* -----------------------------------------------------------
   Remove white backgrounds / ribbons / gradients
----------------------------------------------------------- */
/* Active nav link */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  background: none !important;
  box-shadow: none !important;
}

/* ToC title (secondary sidebar) */
.md-sidebar--secondary .md-sidebar__title {
  background: none !important;
  box-shadow: none !important;
}

/* Nav links (general) */
.md-nav__link {
  background: none !important;
  box-shadow: none !important;
}

/* Sidebar and nav titles */
.md-sidebar__title,
.md-nav__title,
.md-nav--primary .md-nav__title {
  background: none !important;
  box-shadow: none !important;
}

/* Remove sticky fade/gradient in sidebar scroll area */
.md-sidebar__scrollwrap::before,
.md-sidebar__scrollwrap::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}


/* -----------------------------------------------------------
   Header title font (Rock 3D) & layout
----------------------------------------------------------- */
/* Apply Rock 3D to all header title variants Material uses */
.md-header__title,
.md-header__title a,
.md-header__topic,
.md-header__title .md-ellipsis {
  font-family: "Rock 3D", sans-serif !important;
  font-weight: 400 !important; /* Rock 3D only ships one weight */
  font-size: 2.4rem !important;  /* increase this value to make it bigger */
  letter-spacing: 0.5px;
}


.md-typeset a {
  color: #FFD580;
  word-break: break-word;
}


.md-nav__item .md-nav__link--active, .md-nav__item .md-nav__link--active code {
  color: #FFD580;
}

/* Hide the "Home" title on the homepage */
[data-md-page="index"] h1 {
  display: none !important;
}

/* Kill borders/shadows on any iframe inside page content */
.md-typeset iframe {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
/* Center all YouTube iframes inside MkDocs pages */
.md-typeset iframe[src*="youtube.com"],
.md-typeset iframe[src*="youtu.be"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border: none;
  width: min(90%, 800px);   /* centers nicely + responsive */
  aspect-ratio: 16 / 9;
  height: auto;
}
.video-center {
  display: flex;
  justify-content: center;   /* forces the iframe into the middle */
  margin: 2rem 0;
}

.video-center iframe {
  width: min(90%, 800px);
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
}

/* ===== Font for the tile labels ===== */
@import url('https://fonts.googleapis.com/css2?family=Rock+3D&display=swap');

/* ===== Site-wide dark brown ===== */
:root{
  --brand-brown: #4b3b2b;
}

html, body{
  background: var(--brand-brown) !important;
}

.md-header,
.md-main,
.md-footer,
.md-content,
.md-sidebar,
.md-nav{
  background: var(--brand-brown) !important;
  box-shadow: none !important;
}

.md-container,
.md-content__inner,
.md-main__inner{
  background: transparent !important;
}



/* ===== Assignments grid layout ===== */
.assignments-grid .row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* The clickable tiles */
.assignment-link{
  position: relative;
  display: block;
  flex: 1 1 calc(33.333% - 0.667rem);  /* 3 per row */
  min-height: 220px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--brand-brown); /* fallback if image missing */
  overflow: hidden;
  text-decoration: none;
  outline: 1px solid rgba(255,255,255,.08);
}

/* Gentle bottom gradient for text readability */
.assignment-link::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
  transition: opacity .2s ease;
}

.assignment-link:hover::after{ opacity: .85; }

/* Label text (Rock 3D) */
.assignment-link span{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .6rem .75rem;
  font: 700 1.05rem/1.2 "Rock 3D", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff;
  letter-spacing: .2px;
  text-shadow: 0 1px 1px rgba(0,0,0,.5);
}

/* Mobile: stack tiles */
@media (max-width: 800px){
  .assignment-link{ flex: 1 1 100%; min-height: 180px; }
  .assignments-grid .row{ gap: .75rem; }
}    

/* Match admonition box to brown background */
.md-typeset .admonition, 
.md-typeset details {
  background-color: #3c2f28;  /* Match your brown */
  border: 1px solid #a57d57;  /* Soft golden border */
  color: #e6d8c3;             /* Light text */
}

/* Admonition title (heading bar) */
.md-typeset .admonition-title {
  background-color: #3c2f28;
  color: #f0e6d2;
  font-weight: bold;
}
/* Make tables match dark brown background */
.md-typeset table {
  background-color: #3c2f28;   /* Match your page background */
  color: #e6d8c3;              /* Light text to stay readable */
  border: 1px solid #6f5644;   /* Soft border */
}

.md-typeset table th,
.md-typeset table td {
  border: 1px solid #6f5644;   /* Border between cells */
  padding: 6px 12px;
}

/* === FINAL CLEAN TABLE STYLE FOR FABRICADEMY BROWN THEME === */

.md-typeset table {
  background-color: #3c2f28 !important;   /* same brown as page background */
  color: #e6d8c3 !important;              /* light text for readability */
  border: 1px solid #6f5644 !important;   /* soft outline */
  border-collapse: collapse;
}

.md-typeset table th,
.md-typeset table td {
  border: 1px solid #6f5644 !important;
  padding: 6px 12px;
  background-color: #3c2f28 !important;   /* ensure all cells match */
}

.md-typeset table tr:nth-child(odd),
.md-typeset table tr:nth-child(even) {
  background-color: #3c2f28 !important;   /* disable zebra striping */
}

.md-typeset table th {
  color: #f3e8cf !important;
  font-weight: 600;
}
/* Brown background for admonitions */
.md-typeset .admonition,
.md-typeset details {
  background-color: #3c2f28;
  border: 1px solid #6f5644;
  color: #e6d8c3;
}

/* Admonition title bar */
.md-typeset .admonition-title {
  background-color: #3c2f28;
  color: #f0e6d2;
  font-weight: bold;
}
.bio-box {
  background-color: #4B3B2B;
  color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.md-typeset .admonition.note {
  background: #4B3B2B !important;
  color: white !important;
}

.md-typeset .admonition.note > .admonition-title {
  background-color: #4B3B2B !important;
  color: white !important;
  font-weight: bold;
}