/* style.css */

/* ── Navbar ─────────────────────────────────────────────────────────────── */

.navbar-default {
  background-color: #D1D4CC !important;
  border-color: #000000 !important;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a {
  color: #000000 !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #D1D4CC !important;
  color: #ffffff !important;
}

/* ── Body ───────────────────────────────────────────────────────────────── */

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
}


/* ── Legacy photo classes (kept for backward compatibility) ─────────────── */

.faculty-text {
  flex: 1;
}

.student-photo,
.faculty-photo {
  width: 200px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* ── Shared image styling (used in non-collapsible contexts) ────────────── */

.faculty-img, .student-img, .highlight-img, .news-img, .class-img {
  float: right;
  width: 150px;
  border-radius: 50%;
  margin-left: 20px;
  border: 3px solid #000000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.info-img {
  float: right;
  width: 150px;
  border-radius: 50%;
  margin-left: 20px;

}

/* ── Collapsible boxes ──────────────────────────────────────────────────── */
/*
   Each box type shares the same <details>/<summary>/<div> structure:

     <details class="faculty-box">          <- outer container
       <summary class="faculty-summary">    <- always-visible header bar
       <div class="faculty-content">        <- expanded body

   Swap "faculty" -> "student" / "highlight" / "news" / "class" as needed.
*/

/* -- Outer containers ---------------------------------------------------- */

.faculty-box,
.info-box,
.student-box,
.highlight-box,
.news-box,
.class-box {
  border: 2px solid #4B0082 !important;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

/* Per-type background colours */
.faculty-box   { background-color: #C0BCE0 !important; }
.info-box      { background-color: #C0BCE0 !important; }
.student-box   { background-color: #E1DFF0 !important; }
.highlight-box { background-color: #D0DED0 !important; }
.news-box      { background-color: #FFFFFF !important; }
.class-box     { background-color: #C0BED4 !important; }

/* -- Summary / header bars ----------------------------------------------- */

.faculty-summary,
.info-summary,
.student-summary,
.highlight-summary,
.news-summary,
.class-summary {
  display: flex;
  align-items: center;
  padding: 20px 18px;
  cursor: pointer;
  font-size: 1.1em;
  font-weight: 600;
  color: #ffffff;
  background-color: #4B0082;
  border-radius: 8px 8px 0 0;
  list-style: none;
  user-select: none;
  transition: background-color 0.15s ease;
}

/* Round all corners when collapsed */
details:not([open]) > .faculty-summary,
details:not([open]) > .info-summary,
details:not([open]) > .student-summary,
details:not([open]) > .highlight-summary,
details:not([open]) > .news-summary,
details:not([open]) > .class-summary {
  border-radius: 8px;
}

/* Hide the default browser disclosure triangle */
.faculty-summary::-webkit-details-marker,
.info-summary::-webkit-details-marker,
.student-summary::-webkit-details-marker,
.highlight-summary::-webkit-details-marker,
.news-summary::-webkit-details-marker,
.class-summary::-webkit-details-marker { display: none; }

.faculty-summary::marker,
.info-summary::marker,
.student-summary::marker,
.highlight-summary::marker,
.news-summary::marker,
.class-summary::marker { display: none; }

/* Rotating arrow */
.faculty-summary::before,
.info-summary::before,
.student-summary::before,
.highlight-summary::before,
.news-summary::before,
.class-summary::before {
  content: "▶";
  font-size: 0.7em;
  margin-right: 0.6em;
  transition: transform 0.2s ease;
  opacity: 0.85;
}

details[open] > .faculty-summary::before,
details[open] > .info-summary::before,
details[open] > .student-summary::before,
details[open] > .highlight-summary::before,
details[open] > .news-summary::before,
details[open] > .class-summary::before {
  transform: rotate(90deg);
}

/* Hover */
.faculty-summary:hover,
.info-summary:hover,
.student-summary:hover,
.highlight-summary:hover,
.news-summary:hover,
.class-summary:hover {
  background-color: #360066;
}

/* -- Content areas -------------------------------------------------------- */

.faculty-content,
.info-content,
.student-content,
.highlight-content,
.news-content,
.class-content {
  padding: 20px;
  overflow: auto;
}

/* Photos inside content areas */
.faculty-content img, .student-content img, .highlight-content img, .news-content img, .class-content img {
  float: right;
  width: 150px;
  border-radius: 50%;
  margin-left: 20px;
  border: 3px solid #000000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.info-content img {
  float: right;
  width: 150px;
  border-radius: 50%;
  margin-left: 20px;

}

/* Clear floats */
.faculty-content::after,
.info-content::after,
.student-content::after,
.highlight-content::after,
.news-content::after,
.class-content::after {
  content: "";
  display: table;
  clear: both;
}

/* ── Reference list indentation ─────────────────────────────────────────── */

#refs {
  padding-left: 0.25in;
  text-indent: -0.25in;
  margin-bottom: 8pt;
}

/* ── Icons ──────────────────────────────────────────────────────────────── */

i {
  color: #004a99;
  margin-right: 8px;
}

a:hover i {
  color: #ffcc00;
}


/* ── Background ──────────────────────────────────────────────────────────────── */

body {
  background-image: url("images/puplm.png");
  background-size: cover;          /* Scales image to fill the screen */
  background-attachment: fixed;   /* Keeps image static while scrolling */
  background-repeat: no-repeat;
  background-position: center;
}