/* ==========================================================================
   CUSTOM STYLESHEET — Carl C. Haynes-Magyar's Personal Academic Website
   ==========================================================================
   This stylesheet customizes the Bootstrap 4 base styles for a personal
   academic portfolio site. It is organized into the following sections:

   1. Font Imports
   2. Base / Global Styles
   3. Layout & Container
   4. Typography (Headings, Small Text)
   5. Navigation Header
   6. Navigation Pills (Active/Hover States)
   7. Images (Thumbnails, Floats, Link Icons)
   8. SVG
   9. Page-Specific Styles (Home, Bio, Research, etc.)
   10. Utility Classes
   11. Accessibility
   ========================================================================== */


/* ==========================================================================
   1. FONT IMPORTS
   ========================================================================== */

/* Primary typeface: Source Sans Pro — a clean, readable sans-serif used
   throughout the site at light (300), regular (400), and bold (700) weights,
   including italic variants for light and bold. */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,300;1,700');


/* ==========================================================================
   2. BASE / GLOBAL STYLES
   ========================================================================== */

/* Global body styles: uses Source Sans Pro at a light weight (300) for a
   modern, airy feel. Font size is set to 16px with 1.6em line-height
   for comfortable reading. */
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;
  line-height: 1.6em;
  text-transform: none;
  text-decoration: none;
}

/* Global link styles: removes underline and sets a transparent background.
   The accent color #EE8094 (soft pink) is available but currently commented
   out in favor of the default Bootstrap link color. */
a {
  text-decoration: none;
  background-color: transparent;
  /* color: #EE8094; */
}

/* Global image alignment: vertically centers inline images with
   surrounding text. */
img {
  vertical-align: middle;
}


/* ==========================================================================
   3. LAYOUT & CONTAINER
   ========================================================================== */

/* Main content container: adds top padding for spacing below the browser
   chrome and removes bottom padding so content flows to the footer area. */
.container {
  padding-top: 50px;
  padding-bottom: 0px;
}

/* On medium+ screens (768px and above), constrain the container width
   to 42em (~672px) for optimal reading line length. */
@media (min-width: 768px) {
  .container {
    max-width: 42em;
  }
}

/* Remove the default blue focus outline when the container receives focus
   (the container has tabindex="0" for keyboard accessibility). */
.container:focus {
  outline: none;
}

/* Container-image: a responsive wrapper that is hidden on small screens
   and shown as an inline element on screens 560px and wider. Used for
   decorative images that should only appear at larger viewport sizes. */
.container-image {
  display: none;
  visibility: hidden;
  position: relative;
}

@media only screen and (min-width: 560px) {
  .container-image {
    display: inline;
    visibility: visible;
  }
}

/* Add a small amount of vertical whitespace after each Bootstrap row
   to visually separate content blocks. */
.row {
  margin-bottom: 10px;
}


/* ==========================================================================
   4. TYPOGRAPHY (Headings, Small Text)
   ========================================================================== */

/* Override Bootstrap's default bold heading weight with a regular (400)
   weight for a lighter, more elegant appearance. Targets both heading
   elements (h1–h6) and Bootstrap heading classes (.h1–.h6). */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

/* Lead paragraph: used for introductory text, set at 24px for emphasis. */
.lead {
  font-size: 24px;
}

/* Small text: override to use a light font weight (300) to keep the
   thin aesthetic consistent with the rest of the body text. */
.small, small {
  font-weight: 300;
}


/* ==========================================================================
   5. NAVIGATION HEADER
   ========================================================================== */

/* The page header sits at the top of each page and contains the nav pills.
   Bordered top and bottom with light gray lines for visual separation. */
.header {
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}


/* ==========================================================================
   6. NAVIGATION PILLS (Active/Hover States)
   ========================================================================== */

/* Active nav pill: uses the site's accent color (#EE8094, soft pink) as the
   background with dark text (#323232) for contrast. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #323232;
  background-color: #EE8094;
}

/* Default (inactive) nav pill: dark text with square corners (no border
   radius) for a clean, modern look instead of Bootstrap's rounded pills. */
.nav-pills .nav-link {
  border-radius: 0rem;
  color: #323232;
}


/* ==========================================================================
   7. IMAGES (Thumbnails, Floats, Link Icons)
   ========================================================================== */

/* Thumbnail images: overrides Bootstrap's default thumbnail styling.
   Removes padding and border, adds a subtle drop shadow and rounded
   corners. On small screens, max-width is 125px; on 560px+ it's 150px. */
.img-thumbnail {
  padding: 0;
  border: none;
  margin-top: 0.5em;
  max-width: 125px;
  float: right;
  filter: drop-shadow(0.25em 0.25em 0.25em rgba(0, 0, 0, 0.1));
  border-radius: 10px;
}

@media only screen and (min-width: 560px) {
  .img-thumbnail {
    max-width: 150px;
  }
}

/* Floated images: used for inline photos (e.g., headshot on the bio page).
   Floated right with spacing on left and bottom, capped at 50% width so
   text wraps around them. */
.img-float {
  margin-top: 0.5em;
  margin-left: 1em;
  margin-bottom: 1em;
  border-radius: 4px;
  max-width: 50%;
}

/* Link icon images: small inline icons (e.g., chain-link icon for anchor
   links). Sized to roughly match the text and nudged left to sit close
   to the preceding heading text. */
img.link {
  width: 0.9em;
  margin-bottom: 0.1em;
  margin-left: -0.4em;
}

/* Author mugshot images: used on pages that display collaborator photos.
   Starts at half opacity and becomes fully opaque on hover for a subtle
   interactive reveal effect. */
.author-mug {
  opacity: 0.5;
}

.author-mug:hover {
  opacity: 1.0;
}

/* Author mugshot link wrapper: ensures the link around the mugshot image
   has no underline in both default and hover states. */
.author-mug-link {
  text-decoration: none;
}

.author-mug-link:hover {
  text-decoration: none;
}


/* ==========================================================================
   8. SVG
   ========================================================================== */

/* SVG elements: prevents overflow, caps width at 1200px, and centers
   horizontally within the parent container. */
svg {
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
}


/* ==========================================================================
   9. PAGE-SPECIFIC STYLES
   ========================================================================== */

/* --- Home Page: "My Info" Section ---
   On medium screens (560px+), positions the decorative University of Michigan
   buildings illustration as a pseudo-element in the bottom-right corner of
   the intro section. At 772px+ the image scales up to 300px and is pushed
   behind content with z-index: -1. */
@media only screen and (min-width: 560px) {
  .my-info {
    position: relative;
  }

  .my-info:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../images/umich_buildings.png');
    background-size: 150px;
    background-position: bottom right;
    background-repeat: no-repeat;
  }
}

@media only screen and (min-width: 772px) {
  .my-info:after {
    background-size: 300px;
    z-index: -1;
  }
}

/* Name heading: slightly smaller than default, with tight line-height
   and no bottom margin for a compact name/title block. */
.my-name {
  font-size: 0.8em;
  line-height: 0.7em;
  margin-bottom: 0;
}

/* Pronouns: displayed in small italic text beneath the name. */
.my-pronouns {
  font-size: 0.5em;
  font-style: italic;
}

/* University of Michigan buildings decorative image (used on the home page).
   On mobile: centered at 90% width. On 768px+: absolutely positioned in the
   bottom-right corner at 300px wide. */
.umich-buildings {
  width: 90%;
  margin: 0 auto;
  display: block;
}

@media (min-width: 768px) {
  .umich-buildings {
    position: absolute;
    width: 300px;
    right: 15px;
    bottom: 0px;
  }
}

/* --- Research Page ---
   Project titles: slightly larger than body text (18px) to distinguish
   project headings within the research listing. */
.project-title {
  font-size: 18px;
}


/* ==========================================================================
   10. UTILITY CLASSES
   ========================================================================== */

/* Forces an element to float right (using !important to override any
   Bootstrap or specificity conflicts). */
.pull-right {
  float: right !important;
}

/* Adds right and bottom margin — useful for spacing inline elements
   like badges or tags. */
.gap-bottom-right {
  margin-right: 20px;
  margin-bottom: 10px;
}

/* Adds bottom padding — used on teaching rows and other sections that
   need extra vertical breathing room. */
.ws-bottom {
  padding-bottom: 20px;
}

/* Centers a block-level element horizontally at 50% width. Used on the
   testing page for the office desk image. */
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


/* ==========================================================================
   11. ACCESSIBILITY
   ========================================================================== */

/* Visually hides text while keeping it available to screen readers.
   Uses the clip/clip-path technique to make the element invisible without
   using display:none (which would remove it from the accessibility tree). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ==========================================================================
   Laptop screen overlay (GIF)
   ========================================================================== */
.desk-stage{
  position: relative;
  display: inline-block;
  line-height: 0;
}

.screen-overlay{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 999;
  pointer-events: none;

  opacity: 0.95;
  object-fit: contain;
  object-position: center;


  background: #000;
}