@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* GLOBAL CHANGES */

/* Global Color Scheme Variables */
:root {
   --nbbgcolor: #324376;
   --nbtextcolor: #FFFFFF;
   --nbhighcolor: #586BA4;
   --bgcolor: #FCF4D9;
   --textcolor: #000000;
   --listmarker: #6A041D;
}

/* Reset Default Browser Spacing and Sizing */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* NAVIGATION BAR AND CONTAINER */

.navbar {
   background-color: var(--nbbgcolor);
   color: var(--nbtextcolor);
   font-size: 1.2rem;
}

.nav-container {
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: .5rem 1.5rem;
}

/* Site Title/Logo */

.logo {
   display: flex;
   align-items: center;
   color: var(--nbtextcolor);
   text-decoration: none;
   padding: 0.5rem;
   transition: background-color 0.2s ease;
}

.logo:hover {
   background-color: var(--nbhighcolor);
   border-radius: 4px;
}

/* Navigation Links */

.nav-links {
   display: flex;
   list-style: none;
}

/* Space Between Menu Items */
.nav-links li {
   margin-left: .5rem;
}

/* Link Appearance */

.nav-links a {
   color: var(--nbtextcolor);
   text-decoration: none;
   padding: 0.5rem;
   transition: background-color 0.2s ease;
}

.nav-links a:hover {
   background-color: var(--nbhighcolor);
   border-radius: 4px;
}

/* Current Page Highlighting (uses JavaScript) */
.active-page {
   background-color: var(--nbhighcolor);
   border-radius: 4px;
   font-weight: bold;
}

/* Hamburger Menu Button (hidden on desktop) */
.hamburger {
   background: none;
   border: none;
   padding: 0;
   margin: 0;
   height: 24px;
   flex-direction: column;
   justify-content: center;
   cursor: pointer;
}

/* The Three Hamburger Lines */
.hamburger span {
   width: 25px;
   height: 3px;
   background: var(--nbtextcolor);
   margin: 3px 0;
}

/* BASIC PAGE STYLE */

body {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   font-size: 1rem;
   font-style: normal;
   background-color: var(--bgcolor);
}

h1,
h2,
h3 {
   font-weight: bold;
   margin-bottom: 1rem;
}

h1 {
   font-size: 1.2rem;
}

h2 {
   font-size: 1.1rem;
}

h3 {
   font-size: 1rem;
}

p {
   margin-bottom: 1rem;
}

/* CONTENT SECTION STYLE */

/* Top/bottom and left/right margins in content section */
.content {
   padding: 1.5rem 2rem;
}

/* Content Links */
.content a {
   font-weight: bold;
   text-decoration: none;
}

.content a:link,
.content a:visited {
   color: var(--nbbgcolor);
}

.content a:hover {
   color: var(--nbhighcolor);
}

.content a:active {
   color: var(--textcolor);
}

/* Big Format First Word/Phrase (usually in Paragraphs) */
.big {
   font-size: 1.2rem;
   font-weight: bold;
}

/* COLLAPSIBLE SECTIONS */

/* Collapsible section headers */
.collapsible summary {
   padding: 1rem 1.25rem;
   color: var(--nbtextcolor);
   background-color: var(--nbhighcolor);
   cursor: pointer;
   font-weight: bold;
   font-size: 1.1rem;
   list-style: none;
   -webkit-appearance: none;
   appearance: none;
}

/* Hover color */
.collapsible summary:hover {
   background-color: var(--nbbgcolor);
}

/* Keep hover color while open */
.collapsible[open] summary {
   background-color: var(--nbbgcolor);
}

/* Hide default browser triangle */
.collapsible summary::-webkit-details-marker {
   display: none;
}

/* Arrow */
.collapsible summary::before {
   content: "";
   display: inline-block;
   width: 0;
   height: 0;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
   border-left: 8px solid var(--nbtextcolor);
   margin-right: 0.75rem;
   transition: transform 0.2s ease;
}

/* Rotate arrow when open */
.collapsible[open] summary::before {
   transform: rotate(90deg);
}

/* HOME/INDEX PAGE */

.home {
   display: flex;
   align-items: flex-start;
   gap: 2rem;
}

.photo {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-shrink: 0;
}

.photo img {
   width: 360px;
   max-width: 100%;
   height: auto;
   border-radius: 16px;
   object-fit: cover;
}

.phototext {
   text-align: center;
   margin-top: 1rem;
}

.bio {
   flex: 1;
}

.center {
   text-align: center;
}

/* SCREENWRITER PAGE */

.columns {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2rem;
}

/* LECTURES PAGE */

.lecture {
   margin-bottom: 1rem;
   border: 2px solid var(--nbbgcolor);
   border-radius: 8px;
   overflow: hidden;
}

/* Lecture content */
.lecture-content {
   display: flex;
   align-items: flex-start;
   gap: 2rem;
   padding: 1.5rem;
}

.lecture-poster img {
   display: block;
   width: 135px;
   max-width: 100%;
   height: auto;
   border: 2px solid var(--textcolor);
}

.lecture-info {
   flex: 1;
}

.lecture-info p {
   margin-bottom: 0;
}

/* LISTS PAGE */

.topten {
   margin-bottom: 1rem;
   border: 2px solid var(--nbbgcolor);
   border-radius: 8px;
   overflow: hidden;
}

.topten ul {
   margin: 0;
   padding: 1rem 1rem 1rem 3rem;
}

.topten li {
   padding: .1rem 0;
}

.topten li::marker {
   color: var(--nbbgcolor);
}

.list-intro {
   margin: 0;
   padding: 1rem 1rem 0rem 1rem;
}

/* MOBILE LAYOUT (WHEN SCREEN WIDTH IS 840PX OR LESS - 768PX IS STANDARD): */

@media (max-width: 840px) {

   /* NAVIGATION */

   /* Show hamburger icon */
   .hamburger {
      display: flex;
   }

   /* Hide menu until hamburger clicked */
   .nav-links {
      display: none;
      flex-direction: column;
      width: 100%;
      background-color: var(--nbbgcolor);
   }

   /* Show menu when JavaScript adds .active */
   .nav-links.active {
      display: flex;
   }

   /* Allow menu to wrap onto next line */
   .nav-container {
      flex-wrap: wrap;
   }

   /* Remove desktop spacing */
   .nav-links li {
      margin: 0;
      text-align: center;
      border-top: 1px solid var(--nbhighcolor);
   }

   /* Larger tap targets for phones */
   .nav-links a {
      display: block;
      padding: 1rem;
   }

   /* Keep active page highlighting on mobile */
   .active-page {
      background-color: var(--nbbgcolor);
   }

   /* RESIZE HOME/INDEX BIO SECTION ACCORDINGLY */

   .home {
      flex-direction: column;
      align-items: center;
      gap: 1rem;
   }

   .bio {
      width: 100%;
   }

   /* RESIZE SCREENWRITER COLUMNS SECTION ACCORDINGLY */

   .columns {
      grid-template-columns: 1fr;
      gap: 1rem;
   }

   /* RESIZE LECTURE SECTION ACCORDINGLY */

   .lecture-content {
      flex-direction: column;
      align-items: center;
      text-align: left;
      gap: 1rem;
   }

}