/* Base Styles */
body {
  font-family: "Avenir", sans-serif;
}

/* --- Desktop Fonts --- */
h1 {
  font-size: 67px;
  font-family: "Avenir", sans-serif;
} /* Avenir Black */
h2 {
  font-size: 30px;
  font-family: "Avenir", sans-serif;
} /* Avenir Black */

.nav-menu, .pdf-type {
  font-size: 20px;
  font-family: "AvenirHeavy", sans-serif;
}/* Avenir Heavy */
.dashboard-labels, .lesson-tab, .grade-names,
.unit-accordions, .grade-tabs {
  font-size: 20px;
  font-family: "Avenir", sans-serif;
} /* Avenir Black */

.tile-headerings {
  font-size: 16px;
  font-family: "Avenir", sans-serif;
}

.main-nav-resources, .horizontal-resources {
  font-size: 18px;
  font-family: "AvenirHeavy", sans-serif;
} /* Avenir Heavy */
.grade-side-nav, .elementary-middle-school {
  font-size: 18px;
  font-family: "Avenir", sans-serif;
} /* Avenir Black */

p, .footer-copy {
  font-size: 16px;
  font-family: "AvenirMedium", sans-serif;
} /* Avenir Medium */
.buttons, .unit-lessons, .assessments-resources-buttons, .breadcrumbs {
  font-size: 16px;
  font-family: "AvenirHeavy", sans-serif;
} /* Avenir Heavy */
.unit-number {
  font-size: 16px; 
  font-family: "Avenir", sans-serif;
} /* Avenir Black */

.assessments-resources-subcategories {
  font-size: 15px;
  font-family: "AvenirHeavy", sans-serif;
} /* Avenir Heavy */
.assessments-resources-links {
  font-size: 14px; font-family: "AvenirHeavy", sans-serif;
} /* Avenir Heavy */

.lesson-page-links, .dashboard-lesson-name {
  font-size: 13px;
  font-family: "AvenirHeavy", sans-serif;
} /* Avenir Heavy */

/* --- Mobile Fonts --- */
@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }
  h2 {
    font-size: 24px;
  }

  .nav-menu {
    font-size: 22px;
    font-family: "AvenirHeavy", sans-serif;
  }
  .dashboard-labels, .dropdown-labels, .tile-headings, .grade-tabs, .grade-names {
    font-size: 20px;
    font-family: "Avenir", sans-serif;
  }

  .main-nav-resources, .resources-dropdown, .pdf-type {
    font-size: 18px;
    font-family: "AvenirHeavy", sans-serif;
  }
  .lesson-tab, .unit-names, .elementary-middle-school {
    font-size: 18px;
    font-family: "Avenir", sans-serif;
  }

  p, .footer-copy {
    font-size: 16px;
    font-family: "AvenirMedium", sans-serif;
  }
  .buttons, .assessments-resources-buttons {
    font-size: 16px;
    font-family: "AvenirHeavy", sans-serif;
  }
  .unit-number, .grade-navigation {
    font-size: 16px;
    font-family: "Avenir", sans-serif;
  }

  .assessments-resources-subcategories {
    font-size: 15px;
    font-family: "AvenirHeavy", sans-serif;
  }
  .assessments-resources-links, .unit-lessons, .dashboard-lesson-name {
    font-size: 14px;
    font-family: "AvenirHeavy", sans-serif; 
  }

  .lesson-page-links, .breadcrumbs {
    font-size: 13px;
    font-family: "AvenirHeavy", sans-serif;
  }
}

/* Fonts */
@font-face {
  font-family: 'Avenir';
  src: 
    url('/Content/assets/fonts/avenir-black.woff2') format('woff2'),
    url('/Content/assets/fonts/avenir-black.woff') format('woff'),
    url('/Content/assets/fonts/avenir-black.ttf') format('truetype'),
    url('/Content/assets/fonts/avenir-black.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'AvenirMedium';
  src: 
    url('/Content/assets/fonts/avenir-medium.woff2') format('woff2'),
    url('/Content/assets/fonts/avenir-medium.woff') format('woff'),
    url('/Content/assets/fonts/avenir-medium.ttf') format('truetype'),
    url('/Content/assets/fonts/avenir-medium.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'AvenirHeavy';
  src: 
    url('/Content/assets/fonts/avenir-heavy.woff2') format('woff2'),
    url('/Content/assets/fonts/avenir-heavy.woff') format('woff'),
    url('/Content/assets/fonts/avenir-heavy.ttf') format('truetype'),
    url('/Content/assets/fonts/avenir-heavy.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}


/* Page Layout for Sidebar, Main Content, Extra */

/* Main Layout: Sidebar - Dashboard - Extra */
.container-fluid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 75vh; /* Full screen height */
}

/* Sidebar */
.sidebar {
  width: 250px; /* Fixed width */
  background-color: #f4f4f4; /* Light grey */
  padding: 20px;
  display: flex;
  flex-direction: column;
}

/* Dashboard: Takes Remaining Space */
.content {
  flex-grow: 1; /* Expands to fill available space */
  padding: 20px;
  display: flex;
  justify-content: center; /* Center dashboard */
}

/* Extra Section (Right Side) */
.extra {
  width: 400px; /* Fixed width */
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: -2;
}

@media screen and (max-width: 768px) {
  .extra {
    width: 100%;
  }
}