/*
 * ================================================
 * SHIMODA MARINE RESEARCH CENTER
 * Shared Website Stylesheet
 * ================================================
 *
 * Loaded AFTER the original style.css.
 *
 * Sections:
 *  1. Colours and Typography
 *  2. Header and Navigation
 *  3. Shared Elements and Accessibility
 *  4. Page Titles
 *  5. News and News Archive
 *  6. Staff Directory
 *  7. Technical and Clerical Staff
 *  8. Research Unit Directory Links
 *  9. Individual Staff Profiles
 * 10. Staff Research Images
 * 11. Laboratory Links
 * 12. Staff Publications
 * 13. Research Unit Pages
 * 14. Responsive Layouts
 */


/* ================================================
   1. COLOURS AND TYPOGRAPHY
   ================================================ */

:root {
  --shimoda-dark: #384141;
  --shimoda-teal: #4fb8aa;
  --shimoda-red: #e84455;
  --shimoda-green: #b2cb20;

  --shimoda-text: #384141;
  --shimoda-muted: #777;
  --shimoda-border: #e5e5e5;
  --shimoda-light: #f6f7f7;

  --shimoda-heading-font: "Raleway", sans-serif;
  --shimoda-body-font: "Open Sans", sans-serif;

  --shimoda-header-height: 80px;
}

body {
  color: var(--shimoda-text);
  font-family: var(--shimoda-body-font);
}

html {
  scroll-padding-top:
    calc(var(--shimoda-header-height) + 20px);
}

button,
input,
select,
textarea {
  font-family: inherit;
}


/* ================================================
   2. HEADER AND NAVIGATION
   ================================================ */

/* Fixed site header */

.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  margin: 0;
  transform: none !important;
}

/* Reserves space beneath the fixed header */

.header-spacer {
  height: var(--shimoda-header-height);
}

/* Navigation background */

.site-header .shimoda-navbar {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100%;
  background: var(--shimoda-dark) !important;
  box-shadow: none;

  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

/* Navigation links */

.site-header
.shimoda-navbar
.navbar-nav
.nav-link {
  color: #fff !important;
  transition: color 0.25s ease;
}

/* Scrolled navigation */

.site-header .shimoda-navbar.is-scrolled {
  background: #fff !important;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.12);
}

.site-header
.shimoda-navbar.is-scrolled
.navbar-nav
.nav-link {
  color: var(--shimoda-dark) !important;
}

/* Mobile navigation toggle */

.site-header
.shimoda-navbar
.navbar-toggler span {
  background: #fff;
}

.site-header
.shimoda-navbar.is-scrolled
.navbar-toggler span {
  background: var(--shimoda-dark);
}

/* Logo */

.site-header .navbar-brand img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ================================================
   3. SHARED ELEMENTS AND ACCESSIBILITY
   ================================================ */

/* Links */

a {
  transition: color 0.2s ease;
}

/* Keyboard focus */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--shimoda-teal);
  outline-offset: 3px;
}

/* Main content */

main {
  display: block;
  min-height: 1px;
}

main img {
  max-width: 100%;
}


/* ================================================
   4. PAGE TITLES
   ================================================ */

/* Original theme headings */

.news-heading h1,
.archive-heading h1,
.page-content h1 {
  font-family: var(--shimoda-heading-font);
  font-size: clamp(2.5rem, 3.8vw, 3.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--shimoda-dark);
  margin-bottom: 20px;
}

/*
 * Shared PageHeader.astro component
 *
 * Matches the News and Events heading size
 * and top spacing.
 */

.page-header {
  padding: 65px 0 30px !important;
  margin: 0;
  background: #fff;
  text-align: center;
}

.page-header h1 {
  font-family: var(--shimoda-heading-font);
  font-size:
    clamp(2rem, 3vw, 2.8rem) !important;
  font-weight: 600;
  line-height: 1.2;
  color: var(--shimoda-dark) !important;
  margin: 0;
  text-align: center;
}

/* Legacy page-header heading colours */

.staff-profile .page-content h1,
.page_header .page-content h1 {
  color: var(--shimoda-dark) !important;
}


/* ================================================
   5. NEWS AND NEWS ARCHIVE
   ================================================ */

/* News descriptions */

.news-page .news-description,
.home-news .news-description,
.archive-page .archive-description {
  font-size: 17px !important;
  line-height: 1.85;
  color: var(--shimoda-dark);
}

/* Category filters */

.news-page .category-button,
.archive-page .filter-button {
  font-size: 16px !important;
  font-weight: 500;
  padding: 12px 20px;
  line-height: 1.4;
}


/* ================================================
   6. STAFF DIRECTORY
   ================================================ */

/* Main directory */

.staff-directory {
  padding: 10px 0 80px;
}

/* Division sections */

.staff-division {
  margin-bottom: 60px;
}

.staff-division > h2 {
  color: var(--shimoda-dark);
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 30px;
  padding-bottom: 12px;
  border-bottom:
    2px solid var(--shimoda-teal);
}

/* Faculty grid */

.staff-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 28px;
}

/* Faculty cards */

.staff-card {
  display: block;
  overflow: hidden;
  border:
    1px solid var(--shimoda-border);
  color: var(--shimoda-dark);
  text-decoration: none;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.staff-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.09);
  text-decoration: none;
}

/* Research speciality */

.staff-card-speciality {
  padding: 20px 20px 14px;
  min-height: 65px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

/* Faculty photographs */

.staff-card-image {
  padding: 0 35px;
}

.staff-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Faculty information */

.staff-card-content {
  padding: 20px;
  text-align: center;
}

.staff-card-content h3 {
  color: var(--shimoda-dark);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 6px;
}

.staff-card-content p {
  color: var(--shimoda-muted);
  font-size: 16px;
  margin-bottom: 0;
}


/* ================================================
   7. TECHNICAL AND CLERICAL STAFF
   ================================================ */

/* Technical staff directory */

.technical-staff-list {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 25px;
  margin-bottom: 28px;
}

/* Names */

.technical-staff-person h3,
.clerical-staff-entry h3 {
  color: var(--shimoda-dark);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 5px;
}

/* Roles */

.technical-staff-person p {
  color: var(--shimoda-muted);
  font-size: 15px;
  margin: 0;
}

/* Shared technical office contact */

.staff-shared-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding: 18px 22px;
  background: var(--shimoda-light);
}

.staff-contact-label {
  color: var(--shimoda-dark);
  font-size: 15px;
  font-weight: 600;
}

/* Shared contact links */

.staff-shared-contact a,
.staff-contact-row a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--shimoda-dark);
  font-size: 15px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.staff-shared-contact a:hover,
.staff-contact-row a:hover {
  color: var(--shimoda-teal);
}

/* Contact icons */

.staff-shared-contact i,
.staff-contact-row i {
  color: var(--shimoda-teal);
}

/* Clerical staff */

.clerical-staff-entry {
  padding: 5px 0;
}

.staff-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-top: 14px;
}


/* ================================================
   8. RESEARCH UNIT DIRECTORY LINKS
   ================================================ */

/*
 * Links displayed at the bottom
 * of the main Staff directory.
 */

.staff-research-unit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.staff-research-unit-list li {
  margin-bottom: 15px;
}

.staff-research-unit-list a {
  color: var(--shimoda-red);
  font-size: 17px;
  line-height: 1.6;
  text-decoration: none;
}

.staff-research-unit-list a:hover {
  color: var(--shimoda-teal);
  text-decoration: underline;
}


/* ================================================
   9. INDIVIDUAL STAFF PROFILES
   ================================================ */

/* Profile container */

.staff-profile {
  padding: 15px 0 70px;
}

/* Back to directory */

.staff-back-link {
  display: inline-block;
  color: var(--shimoda-red);
  font-size: 15px;
  margin-bottom: 25px;
}

/* Staff name heading */

.staff-profile-heading {
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 30px;
}

/* Sidebar and main content */

.staff-profile-layout {
  display: grid;
  grid-template-columns:
    260px minmax(0, 1fr);
  gap: 45px;
  align-items: start;
}

/* Sidebar */

.staff-profile-sidebar {
  border:
    1px solid var(--shimoda-border);
}

.staff-profile-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* Name, role, speciality and affiliation */

.staff-profile-details {
  text-align: center;
  padding: 20px;
}

.staff-profile-details h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
}

.staff-profile-details p {
  font-size: 16px;
  margin-bottom: 8px;
}

/* Research speciality: dark, not teal */

.staff-profile-speciality {
  color: var(--shimoda-dark);
}

/* Affiliation */

.staff-profile-affiliation {
  font-size: 14px;
  line-height: 1.5;
  color: var(--shimoda-dark);
  margin-top: 12px;
}

/* Telephone and email */

.staff-profile-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.staff-profile-contact a {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  color: var(--shimoda-dark);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.staff-profile-contact i {
  color: var(--shimoda-teal);
  flex-shrink: 0;
  margin-top: 3px;
}

.staff-profile-contact a:hover {
  color: var(--shimoda-teal);
}


/* Three-line staff email addresses */

.staff-profile-contact .staff-email-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.staff-email-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 14px;
  line-height: 1.5;
}

.staff-email-lines span {
  display: block;
  overflow-wrap: anywhere;
}


/* Research section heading */

.staff-profile-main > h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 18px;
}

/* Research description */

.staff-research-description {
  font-size: 17px;
  line-height: 1.85;
  margin-bottom: 26px;
  white-space: pre-line;
}

/* Publications section wrapper */

.staff-profile-publications {
  margin-top: 55px;
  border-top:
    1px solid var(--shimoda-border);
  padding-top: 15px;
}


/* ========================================
   MAIN PUBLICATIONS PAGE
   ======================================== */

.publications-page {
  padding: 10px 0 80px;
}

.publications-intro {
  text-align: center;
  margin-bottom: 35px;
}

.publications-intro > p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--shimoda-dark);
}

.publications-summary {
  color: var(--shimoda-muted) !important;
  font-size: 15px !important;
}

/* Year navigation */

.publications-year-navigation {
  padding: 25px 30px;
  margin-bottom: 40px;
  background: var(--shimoda-light);
  text-align: center;
}

.publications-year-label {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--shimoda-dark);
  margin-bottom: 18px;
}

.publications-year-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.publications-year-links a {
  display: inline-block;
  padding: 7px 12px;
  color: var(--shimoda-dark);
  background: #fff;
  border: 1px solid var(--shimoda-border);
  font-size: 15px;
  text-decoration: none;
}

.publications-year-links a:hover,
.publications-year-links a:focus-visible {
  color: #fff;
  background: var(--shimoda-teal);
  border-color: var(--shimoda-teal);
  text-decoration: none;
}

/* Allow for fixed navigation when jumping to a year */

.publications-page .publication-year {
  scroll-margin-top: 110px;
}

/* Avoid unnecessary additional top spacing */

.publications-page .staff-publications {
  padding-top: 0;
}

@media (max-width: 767px) {
  .publications-year-navigation {
    padding: 20px 15px;
  }

  .publications-year-links {
    gap: 8px;
  }

  .publications-year-links a {
    font-size: 14px;
    padding: 6px 10px;
  }
}


/* ================================================
   10. STAFF RESEARCH IMAGES
   ================================================ */

/*
 * Images are centred and constrained by height.
 * Approximately one-third width of the
 * available research-content area.
 */

.staff-research-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  margin: 30px auto;
}

/* Individual figures */

.staff-research-images figure {
  flex: 0 1 33%;
  max-width: 350px;
  min-width: 220px;
  margin: 0;
  text-align: center;
}

/* Image dimensions */

.staff-research-images img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 240px;
  object-fit: contain;
  margin: 0 auto;
}

/* Captions */

.staff-research-images figcaption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--shimoda-muted);
  text-align: center;
  margin-top: 12px;
}

/* Larger research images for Inaba and Harvey */

.staff-research-images--large figure {
  flex: 0 1 48%;
  max-width: 520px;
}

.staff-research-images--large img {
  max-height: 380px;
}

@media (max-width: 767px) {
  .staff-research-images--large figure {
    flex: 0 1 100%;
    max-width: 100%;
  }

  .staff-research-images--large img {
    max-height: 320px;
  }
}

/* ================================================
   11. LABORATORY WEBSITE LINKS
   ================================================ */

.staff-lab-link {
  margin-top: 30px;
  text-align: right;
}

.staff-lab-link a {
  color: var(--shimoda-red);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
}

.staff-lab-link a:hover {
  color: var(--shimoda-teal);
  text-decoration: underline;
}


/* ================================================
   12. STAFF PUBLICATIONS
   ================================================ */

/* Publication section */

.staff-publications {
  padding: 30px 0 70px;
}

.staff-publications > h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--shimoda-dark);
  margin-bottom: 35px;
}

/* Publication year headings */

.publication-year {
  margin-bottom: 38px;
}

.publication-year > h3 {
  font-size: 26px;
  font-weight: 600;
  color: var(--shimoda-teal);
  border-bottom:
    1px solid var(--shimoda-border);
  padding-bottom: 10px;
  margin-bottom: 22px;
}

/* Publication list */

.publication-list {
  list-style: none;
  counter-reset: publication;
  padding-left: 0;
}

/* Individual publication */

.publication-item {
  position: relative;
  padding-left: 32px;
  margin-bottom: 18px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--shimoda-text);
  text-indent: -32px;
}

/* Numbering */

.publication-item::before {
  counter-increment: publication;
  content: counter(publication) ". ";
  display: inline-block;
  width: 32px;
  color: var(--shimoda-muted);
}

/* Publication titles */

.publication-title,
a.publication-title {
  color: #000 !important;
  font-weight: 700;
  text-decoration: none;
}

a.publication-title:hover {
  color: var(--shimoda-teal) !important;
  text-decoration: underline;
}

/* Italics and bold */

.publication-item em {
  font-style: italic;
}

.publication-item strong {
  font-weight: 700;
}

/* Subscripts and superscripts */

.publication-title sub,
.publication-title sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.publication-title sub {
  bottom: -0.25em;
}

.publication-title sup {
  top: -0.5em;
}

/* Scientific names */

.publication-title i,
.publication-title em {
  font-style: italic;
}

/* Book titles */

.publication-book-title,
.publication-book-title i,
.publication-book-title em {
  font-weight: 700;
  font-style: italic;
}


/* ================================================
   13. RESEARCH UNIT PAGES
   ================================================ */

/*
 * Applies to:
 *
 * /en/researchunit1.html
 * /en/researchunit2.html
 */

/* Page content */

.research-unit-page {
  padding: 15px 0 80px;
}

/* Research Unit title */

.research-unit-title {
  font-family: var(--shimoda-heading-font);
  color: var(--shimoda-dark);
  font-size:
    clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 30px;
}

/* Introduction */

.research-unit-introduction {
  max-width: 1050px;
}

.research-unit-introduction p {
  color: var(--shimoda-text);
  font-size: 17px;
  line-height: 1.85;
  margin-bottom: 20px;
}

/* External information link */

.research-unit-external {
  margin: 25px 0 40px;
  text-align: right;
}

.research-unit-external a,
.research-unit-back {
  color: var(--shimoda-red);
  font-size: 16px;
  text-decoration: none;
}

.research-unit-external a:hover,
.research-unit-back:hover {
  color: var(--shimoda-teal);
  text-decoration: underline;
}

.research-unit-external i {
  margin-left: 8px;
}

/* Section headings */

.research-unit-section-heading {
  font-family: var(--shimoda-heading-font);
  color: var(--shimoda-dark);
  font-size: 26px;
  font-weight: 600;
  border-bottom:
    2px solid var(--shimoda-teal);
  padding-bottom: 12px;
  margin: 40px 0 25px;
}

/* Members directory */

.research-unit-members {
  display: grid;
  grid-template-columns: 1fr;
}

.research-unit-member {
  display: grid;
  grid-template-columns:
    240px minmax(0, 1fr);
  column-gap: 25px;
  padding: 13px 0;
  border-bottom:
    1px solid var(--shimoda-border);
  font-size: 16px;
  line-height: 1.6;
}

.research-unit-member strong {
  color: var(--shimoda-dark);
  font-weight: 600;
}

.research-unit-member span {
  color: var(--shimoda-muted);
}

/* Return to Staff directory */

.research-unit-back {
  display: inline-block;
  margin-top: 45px;
}


/* ================================================
   14. RESPONSIVE LAYOUTS
   ================================================ */


/* --------------------------------
   14.1 Tablet navigation
   -------------------------------- */

@media (max-width: 991.98px) {

  .site-header
  .shimoda-navbar
  .navbar-collapse {
    padding: 12px 20px 20px;
    max-height: calc(100vh - 85px);
    overflow-y: auto;
  }

  .site-header
  .shimoda-navbar:not(.is-scrolled)
  .navbar-collapse {
    background: var(--shimoda-dark);
  }

  .site-header
  .shimoda-navbar.is-scrolled
  .navbar-collapse {
    background: #fff;
  }

}


/* --------------------------------
   14.2 Tablet staff layouts
   -------------------------------- */

@media (max-width: 991px) {

  .staff-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .staff-profile-layout {
    grid-template-columns:
      220px minmax(0, 1fr);
    gap: 28px;
  }

}


/* --------------------------------
   14.3 Mobile layouts
   -------------------------------- */

@media (max-width: 767px) {

  /* Page headings */

  .news-heading h1,
  .archive-heading h1,
  .page-content h1 {
    font-size: 2.25rem;
  }

  .page-header {
    padding-top: 45px !important;
  }


  /* News */

  .news-page .news-description,
  .home-news .news-description,
  .archive-page .archive-description {
    font-size: 16px !important;
    line-height: 1.8;
  }

  .news-page .category-button,
  .archive-page .filter-button {
    font-size: 15px !important;
    padding: 10px 15px;
  }


  /* Faculty directory */

  .staff-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .staff-division > h2 {
    font-size: 25px;
  }


  /* Technical staff */

  .technical-staff-list {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .staff-shared-contact {
    align-items: flex-start;
    flex-direction: column;
  }

  .staff-contact-row {
    flex-direction: column;
  }


  /* Individual staff profiles */

  .staff-profile-layout {
    grid-template-columns: 1fr;
  }

  .staff-profile-sidebar {
    max-width: 300px;
  }

  .staff-profile-heading {
    font-size: 29px;
  }


  /* Research images */

  .staff-research-images {
    gap: 25px;
  }

  .staff-research-images figure {
    flex: 0 1 100%;
    max-width: 320px;
    min-width: 0;
  }

  .staff-research-images img {
    max-height: 220px;
  }


  /* Research Unit pages */

  .research-unit-page {
    padding-bottom: 55px;
  }

  .research-unit-introduction p {
    font-size: 16px;
  }

  .research-unit-member {
    grid-template-columns: 1fr;
    gap: 4px;
  }

}

@media (max-width: 767px) {
  .staff-research-images--large figure {
    max-width: 100%;
  }

  .staff-research-images--large img {
    max-height: 320px;
  }
}

/* ================================================
   15. REDUCED MOTION ACCESSIBILITY
   ================================================ */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

}