/* ============================================================================
   STYLES.CSS
   ----------------------------------------------------------------------------
   This file customizes the look of the site on top of the Bootswatch "flatly"
   theme set in _quarto.yml. You do NOT need to know CSS to make basic changes
   here — the sections below are labeled, and most of what you'll want to
   change is a single color or font name near the top of the file.

   Quick reference — "I want to change the..."
     - accent color (links, buttons, nav highlight)  -> Section 1, COLOR VARIABLES
     - fonts                                          -> Section 2, TYPOGRAPHY
     - spacing between sections                       -> Section 3, LAYOUT & SPACING
     - card look (People, Gallery, Projects grids)     -> Section 4, CARDS
     - homepage hero banner                            -> Section 5, HOMEPAGE HERO
     - navbar / footer look                            -> Section 6, NAVBAR & FOOTER
     - buttons and links                               -> Section 7, BUTTONS & LINKS
     - responsive / mobile behavior                    -> Section 8, RESPONSIVE

   Nothing in this file requires you to touch a .qmd file, and nothing in
   your .qmd files should need to reference this file directly except the
   one line `css: styles.css` already set in _quarto.yml.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   SECTION 1: COLOR VARIABLES
   ----------------------------------------------------------------------------
   Change the whole site's color scheme by editing ONLY the three hex codes
   below. Everything else in this file (links, buttons, nav highlighting,
   card accents) refers back to these variables, so the site stays
   consistent automatically.

   --accent-color        the main brand color: links, buttons, highlights
   --accent-color-dark    a darker shade of the accent, used for hover states
                          and text that needs more contrast (e.g. on white)
   --accent-color-light   a very light tint of the accent, used for subtle
                          backgrounds (hover rows, card backgrounds, tags)

   Tip: pick a color at https://coolors.co or https://uicolors.app and paste
   the hex codes below. Keep --accent-color-dark noticeably darker than
   --accent-color so link/button text stays readable.
   -------------------------------------------------------------------------- */
:root {
  --accent-color: #1F6F78;       /* EDIT ME: main accent color (teal-blue) */
  --accent-color-dark: #14494F;  /* EDIT ME: darker accent, used for hover/contrast */
  --accent-color-light: #E8F3F3; /* EDIT ME: light tint, used for subtle backgrounds */

  --text-color: #26302F;         /* main body text color (near-black, not pure black) */
  --text-muted: #5B6968;         /* secondary/caption text color */
  --border-color: #E1E8E7;       /* light borders used on cards and dividers */
  --surface-color: #FFFFFF;      /* card / content background */
  --page-bg: #FBFDFD;            /* page background, very slightly off-white */

  /* Bootstrap variables that Quarto/Bootswatch read directly — keep these
     mapped to the accent variables above so built-in components (buttons,
     nav pills, links, table-of-contents highlight) pick up the same color
     without editing them individually. */
  --bs-link-color: var(--accent-color);
  --bs-link-hover-color: var(--accent-color-dark);
  --bs-primary: var(--accent-color);
}


/* ----------------------------------------------------------------------------
   SECTION 2: TYPOGRAPHY
   ----------------------------------------------------------------------------
   Two Google Fonts are loaded below: "Fraunces" for headings (a distinctive
   serif with some editorial character) and "Inter" for body text (a clean,
   highly-readable sans-serif). This pairing is a common choice for academic
   and editorial sites because it reads as serious without feeling dated.

   TO SWAP FONTS:
   1. Pick two fonts at https://fonts.google.com (one for headings, one for
      body text is a safe default — don't use more than two).
   2. Replace the two font names in the @import line below.
   3. Replace the font names in the --font-heading / --font-body variables
      to match (keep the fallback fonts after the comma — they're a safety
      net in case the Google Fonts link fails to load).
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--text-color);
  background-color: var(--page-bg);
  /* Generous line height and a slightly larger base size — this is an
     academic audience reading dense paragraphs, not a marketing page. */
  font-size: 1.06rem;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.title, .navbar-title {
  font-family: var(--font-heading);
  color: var(--text-color);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1.title {
  font-weight: 500;
  font-size: 2.6rem;
}

h2 {
  font-size: 1.7rem;
  margin-top: 3rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color);
}

h3 {
  font-size: 1.3rem;
  color: var(--accent-color-dark);
}

/* Keep line length readable — very wide text columns are hard to read.
   Quarto's default content column already does most of this; this caps it
   a bit further for plain paragraph text. */
main p,
main li {
  max-width: 72ch;
}


/* ----------------------------------------------------------------------------
   SECTION 3: LAYOUT & SPACING
   ----------------------------------------------------------------------------
   Consistent vertical rhythm so sections don't feel cramped. Adjust
   --section-spacing to make more or less room between major sections
   (used by the .content-section helper class in the page templates).
   -------------------------------------------------------------------------- */
:root {
  --section-spacing: 3.5rem;
}

.content-section {
  margin-bottom: var(--section-spacing);
}

main.content {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* Add a little breathing room around the whole page on larger screens. */
.quarto-container {
  padding-left: 1rem;
  padding-right: 1rem;
}


/* ----------------------------------------------------------------------------
   SECTION 4: CARDS
   ----------------------------------------------------------------------------
   Used for the People, Gallery, Projects, and homepage "quick link" grids.
   These build on Bootstrap's default `.card` component (already available
   in Quarto HTML output — no extra libraries needed), just restyled to
   match the site's palette and given a subtle hover lift for polish.
   -------------------------------------------------------------------------- */
.card {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background-color: var(--surface-color);
  box-shadow: 0 1px 2px rgba(20, 73, 79, 0.04);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  overflow: hidden;
  height: 100%;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(20, 73, 79, 0.12);
  transform: translateY(-2px);
}

.card-img-top {

  object-fit: cover;
  background-color: var(--accent-color-light);
}

/* Quarto auto-wraps every Markdown image with alt text in a <figure>
   and repeats the alt text as a visible <figcaption> ("implicit
   figures") — that duplicates captions already written elsewhere on
   the page (e.g. a card's .card-text) and adds an unwanted caption
   under plain photos like headshots. Hide the auto-caption site-wide;
   the alt text itself still works fine for accessibility. */
figure.figure figcaption {
  display: none;
}

.card .quarto-figure,
.card figure.figure {
  margin: 0;
}

.card-body {
  padding: 1.25rem;
}

.card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: 0.25rem;
}

.card-subtitle {
  color: var(--accent-color);
  font-weight: 500;
  font-size: 0.92rem;
  margin-bottom: 0.6rem;
}

.card-text {
  color: var(--text-muted);
  font-size: 0.96rem;
}

/* Round profile-style photos, used on People cards for a friendlier feel. */
.card-img-top.rounded-photo {
  aspect-ratio: 1 / 1;
}

.placeholder-photo {
  width: 150px;
  height: 150px;
  display: block;
  margin: 0 auto;
  border-radius: 30%;
}

.rounded-photo {
  width: 180px;
  height: 180px;
  border-radius: 30%;
  object-fit: cover;
  object-position: center 15%;
}

.rounded-photo2 {
  width: 180px;
  height: 180px;
  border-radius: 30%;
  object-fit: cover;
  object-position: center 50%;
}

.photo {
  width: auto;
  height: auto;
}

/* ----------------------------------------------------------------------------
   SECTION 5: HOMEPAGE HERO
   ----------------------------------------------------------------------------
   The homepage hero (see index.qmd) is a full-width band with a background
   image/pattern and a title + subtitle over it. Edit --hero-min-height to
   make the band taller or shorter.
   -------------------------------------------------------------------------- */
.hero-banner {
  position: relative;
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: var(--section-spacing);
  background-color: var(--accent-color-dark);
  background-size: cover;
  background-position: center;
  color: #F5FAFA;
  isolation: isolate;
}

.hero-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.30) 40%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 0;
}

.hero-banner .hero-content {
  position: relative;
  z-index: 1;
  padding: 2.5rem 3rem;
  max-width: 640px;
}

.hero-banner .hero-content h1 {
  color: #FFFFFF !important;
}

.hero-banner .hero-content p {
  color: #EAF2F1 !important;
  font-size: 1.1rem;
  max-width: 60ch;
}

/* ----------------------------------------------------------------------------
   SECTION 6: NAVBAR & FOOTER
   ----------------------------------------------------------------------------
   Keeps the navbar and footer visually tied to the accent color so the
   whole site reads as one system rather than default Bootstrap styling in
   some places and custom styling in others.
   -------------------------------------------------------------------------- */
.navbar {
  background-color: var(--surface-color) !important;
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(20, 73, 79, 0.05);
}

.navbar-brand,
.navbar-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text-color) !important;
}

.navbar .nav-link {
  color: var(--text-color) !important;
  font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--accent-color) !important;
}

.navbar .dropdown-menu {
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 20px rgba(20, 73, 79, 0.1);
}

.footer,
.page-footer {
  background-color: var(--accent-color-dark);
  color: #FFFFFF;
  border-top: none;
  padding: 2rem 1rem;
  font-size: 1.1rem;
}

.footer .nav-footer-right .bi {
  font-size: 1.5rem;   /* bump this up/down to resize just the icons */
}

/* Quarto wraps the footer content in its own ".nav-footer" div, which
   Bootswatch themes give a separate (lighter) background color by
   default — override it so the whole footer band reads as one solid
   color instead of two mismatched bands. */
.footer .nav-footer {
  background-color: transparent;
}

.footer a,
.page-footer a {
  color: #FFFFFF;
}

.footer a:hover,
.page-footer a:hover {
  color: var(--accent-color-light);
}


/* ----------------------------------------------------------------------------
   SECTION 7: BUTTONS & LINKS
   -------------------------------------------------------------------------- */
a {
  color: var(--accent-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-color-dark);
}

.btn-primary,
.btn.btn-accent {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-primary:hover,
.btn.btn-accent:hover {
  background-color: var(--accent-color-dark);
  border-color: var(--accent-color-dark);
}

/* Small pill-style tag, used for things like "PhD Student" role labels or
   study eligibility tags. Optional to use — plain text works fine too. */
.tag-pill {
  display: inline-block;
  background-color: var(--accent-color-light);
  color: var(--accent-color-dark);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
}


/* ----------------------------------------------------------------------------
   SECTION 8: RESPONSIVE
   ----------------------------------------------------------------------------
   Quarto/Bootstrap already collapses the navbar into a hamburger menu and
   reflows the .row/.column grid to a single column on narrow screens by
   default. Nothing here overrides that — only fine-tunes spacing so cards
   and the hero don't feel cramped on small screens. If you add custom CSS
   of your own below this line, avoid fixed pixel widths on layout
   containers, or you may break this automatic mobile behavior.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  h1.title {
    font-size: 2rem;
  }
  .content-section {
    margin-bottom: 2.25rem;
  }
}

.cite-only {
  display: none;
}

.csl-entry {
  padding-left: 2em;
  text-indent: -2em;
  margin-bottom: 1em;
}

.hanging-citation {
  margin-left: 3em;
  padding-left: 2em;
  text-indent: -2em;
  font-size: 0.9em;
}

.hanging-citation p {
  margin-top: 0 !important;
  margin-bottom: 0.3em !important;
}

@media (min-width: 768px) {
  .people-grid > .g-col-md-3 {
    padding-top: 1.5rem;
  }
}


#latest-news .quarto-listing .thumbnail img {
  width: 220px;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  border-radius: 8px;
}