/** Add your extra/custom CSS classes below */
/* ===============================
   Self-hosted fonts
   =============================== */

/* Outfit Thin (100) */
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/Outfit-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Outfit Light (300) */
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/Outfit-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Chetta Vissto (landing page title) */
@font-face {
  font-family: "Chetta Vissto";
  src: url("../assets/fonts/ChettaVissto.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ===============================
   Header + navigation background
   =============================== */
.md-header,
.md-tabs {
  background-color: #fff9f5 !important;
}

/* ===============================
   Apply Outfit to site name + nav
   (use 300 = Light for readability; change to 100 if you want super-thin)
   =============================== */
[data-md-component="header"] .md-header__title,
[data-md-component="header"] .md-header__title .md-ellipsis,
[data-md-component="header"] .md-header__title a,
.md-header__topic .md-ellipsis,
.md-header nav a,
.md-header__button,
.md-tabs a {
  font-family: "Outfit", sans-serif !important;
  font-weight: 300 !important;  /* Light */
  color: #000000 !important;
}

/* ===============================
   Hide breadcrumbs only on the homepage
   =============================== */
[data-md-path="index.md"] .md-path,
[data-md-path="index.md"] [aria-label="Breadcrumb"],
[data-md-path="index.md"] .md-breadcrumb {
  display: none !important;
}

/* ===============================
   Global link styles in content
   =============================== */
.md-typeset a,
.md-typeset a:visited,
.md-typeset a:active {
  color: #93a09b !important;     /* warm brown */
  text-decoration: none;
}
.md-typeset a:hover {
  color: orange !important;
  text-decoration: underline;
}

/* ===============================
   Search blends into header
   =============================== */
.md-search__form {
  background-color: #fff9f5 !important;
  border: none !important;
  box-shadow: none !important;
}
.md-search__input {
  background-color: #fff9f5 !important;
  color: #000000 !important;
  font-family: "Outfit", sans-serif;
}
.md-search__icon {
  color: #000000 !important;
}
.md-search__input::placeholder {
  color: #000000 !important;
  opacity: 0.6;
}

/* ===============================
   Sidebar nav link colors
   =============================== */
.md-nav__item .md-nav__link {
  color: #93a09b !important; /* default */
}
.md-nav__item .md-nav__link:hover {
  color: orange !important;  /* hover */
}
.md-nav__item .md-nav__link--active {
  color: #000000 !important; /* active/current page */
}

/* ===============================
   LANDING PAGE TITLE → Chetta Vissto
   Targets the first H1 on index.md only
   =============================== */
[data-md-path="index.md"] .md-content .md-typeset h1:first-of-type {
  font-family: "Chetta Vissto", sans-serif !important;
  font-weight: normal !important;
  line-height: 1.2;
  /* keep default size, or uncomment to adjust: */
  /* font-size: 3rem !important; */
}
/* Hide the first H1 rendered in the page content */
.md-content__inner > h1:first-of-type {
  display: none;
}

/* Assignments page */
.assignments-grid .row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1em;
}

.assignment-link {
  position: relative;
  width: 32%;
  background-size: cover;
  background-position: center;
  min-height: 200px;
  text-decoration: none; /* removes underline */
  overflow: hidden;      /* ensures text doesn't spill outside */
}

.assignment-link:hover {
  opacity: 0.7;
}

.assignment-link img {
  width: 100%;
}

.assignment-link span {
  position: absolute;
  bottom: 10px;           /* a little above bottom edge */
  left: 50%;
  transform: translateX(-50%); /* centers text horizontally */
  font-weight: bold;
  color: white;
  text-align: center;
  opacity: 0;             /* hidden by default */
  transition: opacity 0.3s ease; /* fade-in effect */
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* optional for readability */
}

.assignment-link:hover span {
  opacity: 1;             /* show text on hover */
}

.about-heading {
  color: #945335;
}

  
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Make code blocks use normal font size */
.md-typeset pre code {
  font-size: 0.85em;  /* adjust as needed, e.g. 0.9em or 0.8em */
}