/*
Theme Name: SEAS Multisite
Theme URI:
Author: Joe Payovich
Author URI:
Description: SEAS multi-page lab and research group theme, child of Twenty Twenty-Five. Used for faculty lab and research group sites on the SEAS WordPress Multisite on Pantheon.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: seas-multisite
*/

/* ===================================================================
   SEAS DESIGN TOKENS — matched to seas.umich.edu creative theme
   Michigan Blue:    #00274C  (--michigan-blue)
   Michigan Maize:   #FFCB05  (--michigan-maize)
   Mid Blue:         #0060A7  (--mid-blue, links)
   Ocean Blue:       #0071A5  (--ocean-blue, alt links)
   Rich Black:       #131516  (--rich-black, body text)
   Gold:             #E2B508  (--gold, hover border)
   Dark Navy:        #001338  (sub-footer, darkest bg)
   Off-white:        #FAFAFA  (--white, pale bg)
   Pale Gray 4:      #F1F1F1  (section bg)
   Hit Gray:         #A7B7BF  (borders, dividers)
   Content width:    1400px (live site container)
   Font:             Montserrat, sans-serif
=================================================================== */

/* ── Base ── */
body {
  font-family: "Montserrat", sans-serif;
  color: #131516;
  background-color: #fff;
}

/* ── Selection ── */
::selection {
  background-color: #00274C;
  color: #FFCB05;
}

/* ── Links ── */
a {
  color: #0060A7;
  text-decoration: underline;
  transition: color 0.15s ease;
}

a:hover,
a:focus {
  color: #00274C;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", sans-serif;
  color: #00274C;
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 2.25rem; margin-bottom: 1.25rem; }
h2 { font-size: 1.5rem; margin-bottom: 1rem; }

/* ── Buttons ── */
.wp-block-button__link,
.wp-element-button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 2px solid #00274C;
  background-color: #00274C;
  color: #FAFAFA;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  border-radius: 0;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  background-color: #FFCB05;
  border-color: #E2B508;
  color: #00274C;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid #00274C;
  color: #00274C;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #00274C;
  color: #FAFAFA;
}

.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: #FFCB05;
  border-color: #E2B508;
  color: #00274C;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: #00274C;
  border-color: #00274C;
  color: #FAFAFA;
}

/* ── Header ── */
header.wp-block-group {
  background-color: #00274C;
  border-bottom: 3px solid #FFCB05;
}

header.wp-block-group a {
  color: white;
  text-decoration: none;
}

/* ── Site Header Identity (logo + site title) ── */
.site-header-inner {
  align-items: center;
  padding-left: 25px;
  padding-right: 25px;
}

.site-header-identity {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
  align-items: center;
  gap: 1.5rem;
}

.site-header-logo {
  flex-shrink: 0;
}

.site-header-logo img {
  max-width: 260px;
  height: auto;
  display: block;
}

.site-header-title,
.site-header-title a {
  color: white !important;
  text-decoration: none !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
  text-align: center;
}

.site-header-title {
  min-width: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.site-header-title a:hover {
  color: #FFCB05 !important;
}

/* The 260px logo max-width above is permanent, not just a narrow-screen
   rule: .site-header-inner has align="wide", so its content box never
   exceeds theme.json's wideSize (1440px) no matter how wide the actual
   monitor is. A 480px logo can never coexist there with the full nav
   row (580px) and an untruncated title, regardless of screen size, so
   there's no width past which it's safe to grow the logo back up.
   Ellipsis above is just a safety net for a subsite with an unusually
   long title; at this size normal titles fit in full. */

@media screen and (max-width: 1024px) {
  .site-header-title {
    font-size: 0.875rem !important;
  }
}

/* Below 768px, stack the title under the logo instead of hiding or
   truncating it, so it stays fully legible on phones regardless of
   how long a given subsite's title is. */
@media screen and (max-width: 768px) {
  .site-header-identity {
    flex-direction: column;
    align-items: stretch;
    flex-grow: 1;
    gap: 0.25rem;
  }

  .site-header-title,
  .site-header-title a {
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    text-align: left;
    max-width: 100%;
  }
}

/* ── Navigation ── */
header .wp-block-navigation-item__content {
  color: white;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.5rem 0.5rem;
  white-space: nowrap;
  border-bottom: 1px solid #FFCB05;
  text-decoration: none;
  transition: color 0.15s ease;
}

header .wp-block-navigation-item:hover .wp-block-navigation-item__content,
header .wp-block-navigation-item:focus .wp-block-navigation-item__content {
  color: #FFCB05;
}

/* gap breaks the border-bottom underline into separate segments per
   item (matching the live seas.umich.edu nav) instead of one solid
   line; padding above was trimmed by the same amount so total nav
   width is unchanged, since it's already a tight fit against the
   1250px mobile-menu breakpoint above. */
header .wp-block-navigation__container {
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
}

header .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
  color: #FFCB05;
}

/* ── Mobile menu overlay ── */
/* Breakpoint is 1250px rather than the more typical ~960px: the full
   nav row plus a legible logo and the untruncated site title cannot
   all fit below roughly 1250px, so the toggle has to take over earlier
   than usual to keep the title from cropping. */
@media screen and (max-width: 1250px) {
  header .wp-block-navigation__responsive-container-open {
    display: flex !important;
    color: white;
  }

  header .wp-block-navigation__container {
    display: none !important;
  }
}

@media screen and (max-width: 480px) {
  header .wp-block-site-logo img {
    width: 200px !important;
    max-width: 200px !important;
  }
}

.wp-block-navigation__responsive-container.is-menu-open {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  min-height: 100vh !important;
  position: fixed !important;
  background-color: #00274C !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 9999 !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
  align-items: center !important;
  width: 100% !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
  font-size: 1.5rem !important;
  color: white !important;
  text-align: center !important;
  white-space: normal !important;
  border-bottom: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
  color: #FFCB05 !important;
}

.wp-block-navigation__responsive-container-close {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  color: white !important;
  background: none !important;
  border: none !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
}

/* ── Hero Slider ── */
.seas-hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #00274C;
  height: 520px;
}

.seas-slider-track {
  position: relative;
  width: 100%;
  height: 520px;
}

.seas-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 520px;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.seas-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.seas-slider-track::after {
  display: none;
}

.seas-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.seas-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 39, 76, 0.15) 0%,
    rgba(0, 39, 76, 0.75) 55%,
    rgba(0, 39, 76, 0.92) 100%
  );
}

.seas-slide-content {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 3rem 3rem 2.5rem;
  z-index: 1;
}

.seas-slide-headline {
  color: white;
  font-size: clamp(1.25rem, 2.5vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* A slide with a Link URL wraps its headline in an anchor. Keep it looking
   like the headline, not a body link. */
.seas-slide-headline a {
  color: inherit;
  text-decoration: none;
}

.seas-slide-headline a:hover,
.seas-slide-headline a:focus {
  text-decoration: underline;
}

.seas-slide-excerpt {
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  margin-bottom: 0;
}

.seas-slider-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.seas-slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
}

.seas-slider-dot.is-active,
.seas-slider-dot:hover {
  background-color: #FFCB05;
}

.seas-slider-prev,
.seas-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,39,76,0.5);
  color: white;
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.seas-slider-prev:hover,
.seas-slider-next:hover {
  background: rgba(0,39,76,0.85);
}

.seas-slider-prev { left: 1rem; }
.seas-slider-next { right: 1rem; }

.seas-slider-playpause {
  position: absolute;
  bottom: 0.75rem;
  right: 1rem;
  background: rgba(0,39,76,0.5);
  color: white;
  border: none;
  width: 2rem;
  height: 2rem;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.seas-slider-playpause:hover {
  background: rgba(0,39,76,0.85);
}

@media (prefers-reduced-motion: reduce) {
  .seas-slide {
    transition: none;
  }
}

@media screen and (max-width: 768px) {
  .seas-hero-slider,
  .seas-slider-track,
  .seas-slide {
    height: 380px;
  }

  .seas-slide-content {
    width: 100%;
    padding: 2rem 1.5rem;
    background: linear-gradient(
      to top,
      rgba(0,39,76,0.92) 0%,
      rgba(0,39,76,0.4) 60%,
      transparent 100%
    );
    top: auto;
    bottom: 0;
    justify-content: flex-end;
  }

  .seas-slide-overlay {
    background: rgba(0,39,76,0.2);
  }

  .seas-slide-headline {
    font-size: 1.25rem;
  }

  .seas-slide-excerpt {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 480px) {
  .seas-hero-slider,
  .seas-slider-track,
  .seas-slide {
    height: 320px;
  }

  .seas-slider-prev,
  .seas-slider-next {
    display: none;
  }
}

/* ── Hero (cover block — for inner pages) ── */
.seas-hero.wp-block-cover {
  min-height: 380px;
  border-bottom: 4px solid #FFCB05;
}

.seas-hero .wp-block-cover__inner-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

.seas-hero h1,
.seas-hero .wp-block-post-title,
.seas-hero .wp-block-heading {
  color: white !important;
  font-size: clamp(1.75rem, 4vw, 3.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  margin-bottom: 0.5rem;
}

.seas-hero p,
.seas-hero .wp-block-site-tagline {
  color: rgba(255,255,255,0.92) !important;
  font-size: 1.1rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* ── Main content ── */
.wp-block-post-content {
  font-size: 1.125rem;
  line-height: 1.61;
}

.wp-block-post-content p {
  margin-bottom: 1.5rem;
  max-width: 52rem;
}

.wp-block-post-content ul,
.wp-block-post-content ol {
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
  line-height: 1.61;
}

/* ── Feature label (maize bar accent) ── */
.seas-feature-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.seas-feature-label-text {
  background-color: #FFCB05;
  color: #00274C;
  padding: 0.25rem 0.5rem;
}

.seas-feature-label::after {
  content: "";
  display: block;
  height: 5px;
  width: 100%;
  background-color: #FFCB05;
}

/* ── Section divider (maize rule) ── */
.seas-rule,
hr.seas-rule {
  border: none;
  border-top: 3px solid #FFCB05;
  margin: 0 0 1.5rem 0;
  max-width: 80px;
}

/* ── Tables ── */
table {
  font-size: 1rem;
  line-height: 1.25;
  width: 100%;
  border-collapse: collapse;
}

th {
  font-weight: 500;
  text-transform: uppercase;
  color: #00274C;
  padding: 0.5rem;
  border-top: 2px solid #A7B7BF;
  border-bottom: 2px solid #A7B7BF;
}

td {
  padding: 1rem 0.5rem;
  background-color: #fff;
}

tr:nth-child(odd) td {
  background-color: #F5F6F6;
}

/* ── Separator block ── */
.wp-block-separator {
  border: none;
  border-top: 2px solid #FFCB05;
  max-width: 80px;
  margin: 1.5rem 0;
}

.wp-block-separator.is-style-wide {
  max-width: 100%;
}

/* ── Footer ── */
footer.wp-block-group {
  background-color: #00274C;
  color: white;
}

.site-footer {
  padding-left: 25px !important;
  padding-right: 25px !important;
}

footer.wp-block-group p {
  color: white;
}

footer.wp-block-group a {
  color: var(--wp--preset--color--white);
  text-decoration: none;
  transition: color 0.15s ease;
}

footer.wp-block-group a:hover {
  text-decoration: underline;
  color: var(--wp--preset--color--white);
}

/* Icon images in the footer default to inline (baseline-aligned),
   which reserves phantom descender space around them and throws off
   vertical centering against adjacent text in a flex row. Matches the
   display:block already set on .site-header-logo img for the same
   reason. */
.site-footer img {
  display: block;
}

/* WCAG 2.5.8 requires a 24x24px minimum tap target for icon-only
   links (this doesn't apply to the phone/email text links above,
   since inline text targets are exempt). The icons themselves stay
   the visual size set in footer.html; this just pads the invisible
   hit area, spacing the icons out a bit more in the process. */
.footer-social .wp-block-image a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
}

footer .wp-block-navigation-item__content {
  color: white;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

footer .wp-block-navigation-item__content:hover {
  text-decoration: underline;
}

/* ── Footer logo — invert to white on dark background ── */
.footer-logo img {
  filter: brightness(0) invert(1);
  max-width: 280px;
  height: auto;
}

/* ── Sub-footer ── */
.sub-footer {
  background: #001338;
  color: white;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Pagination ── */
.wp-block-query-pagination {
  border-top: 1px solid #646567;
  border-bottom: 1px solid #646567;
  padding: 0.75rem 0;
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers a {
  color: #131516;
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}

.wp-block-query-pagination-numbers .current {
  border: 1px solid #00274C;
  color: #00274C;
  padding: 0.25rem 0.5rem;
}

/* ── Post title ── */
.wp-block-post-title a {
  color: #131516;
  text-decoration: none;
}

.wp-block-post-title a:hover {
  text-decoration: underline;
}

/* ── Post date ── */
.wp-block-post-date {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #646567;
  margin-bottom: 0.25rem;
}

/* ── Post excerpt ── */
.wp-block-post-excerpt__more-link {
  color: #0060A7;
  font-weight: 500;
  text-decoration: none;
}

.wp-block-post-excerpt__more-link:hover {
  text-decoration: underline;
}

/* ── 404 ── */
.seas-404 {
  text-align: left;
  padding: 5rem 1rem;
}

/* ── Sidebar layout ── */
.main-content-area {
  flex: 1 1 0%;
  min-width: 0;
}

.site-sidebar {
  width: 280px;
  flex-shrink: 0;
  margin-left: 3rem;
}

.sidebar-widget-title {
  background-color: #A7B7BF;
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  margin-bottom: 1rem;
}

.sidebar-site-logo img {
  max-width: 100%;
  height: auto;
}

.sidebar-widget {
  margin-bottom: 2rem;
}

.sidebar-widget p {
  font-size: 0.875rem;
  color: #646567;
}

@media screen and (max-width: 768px) {
  .site-sidebar {
    display: none;
  }

  .main-content-area {
    width: 100%;
  }
}

/* ── Publication Tabs ── */
.seas-tabs {
  margin-bottom: 3rem;
}

.seas-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 2px solid #A7B7BF;
  margin-bottom: 2rem;
  list-style: none;
  padding: 0;
  margin-left: 0;
}

.seas-tab-button {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.625rem 1.25rem;
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: #131516;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.seas-tab-button:hover {
  color: #00274C;
  border-bottom-color: #A7B7BF;
}

.seas-tab-button.is-active {
  color: #00274C;
  border-bottom-color: #FFCB05;
}

.seas-tab-panel {
  display: block;
}

.seas-tab-panel[hidden] {
  display: none;
}

.pub-entry {
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #E2E2E2;
}

.pub-entry:last-child {
  border-bottom: none;
}

.pub-entry-thumb {
  flex-shrink: 0;
  width: 80px;
}

.pub-entry-thumb img {
  width: 80px;
  height: auto;
  display: block;
}

.pub-entry-body {
  flex: 1 1 0%;
  min-width: 0;
}

.pub-entry-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.pub-entry-title a {
  color: #131516;
  text-decoration: none;
}

.pub-entry-title a:hover {
  color: #0060A7;
  text-decoration: underline;
}

.pub-entry-citation {
  font-size: 0.875rem;
  font-style: italic;
  color: #646567;
  margin-bottom: 0.75rem;
}

.pub-entry-abstract {
  font-size: 0.9375rem;
  line-height: 1.61;
}

/* Abstract runs through the_content, so its paragraphs would otherwise
   pick up the global ".wp-block-post-content p" indent (same specificity,
   defined later in this file). Scope the override to out-specify it. */
.wp-block-post-content .pub-entry-abstract p {
  margin-left: 0 !important;
}

.seas-pub-empty {
  font-size: 0.9375rem;
  font-style: italic;
  color: #646567;
}

.pub-entry-reviewed {
  margin-top: 1rem;
}

.pub-entry-reviewed strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.pub-entry-reviewed a {
  display: block;
  font-size: 0.875rem;
  color: #0060A7;
  text-decoration: none;
  line-height: 1.8;
}

.pub-entry-reviewed a:hover {
  text-decoration: underline;
}

.pub-entry.no-thumb {
  flex-direction: column;
  gap: 0;
}

.pub-entry.no-thumb .pub-entry-thumb {
  display: none;
}

@media screen and (max-width: 640px) {
  .pub-entry {
    flex-direction: column;
  }

  .seas-tab-button {
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
  }
}

/* ── Person Profile Pattern ── */
.person-profile {
  border-bottom: 2px solid #E2E2E2;
}

.person-profile:last-child {
  border-bottom: none;
}

.person-photo img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.person-name { color: #00274C; }
.person-title { color: #131516; }
.person-degree { color: #646567; }

.person-link-email a,
.person-link-cv a {
  color: #0060A7;
  text-decoration: none;
  font-weight: 500;
}

.person-link-email a:hover,
.person-link-cv a:hover {
  text-decoration: underline;
}

.person-bio {
  line-height: 1.61;
  max-width: 52rem;
}

.person-social a {
  color: #0060A7;
  font-weight: 500;
  text-decoration: none;
}

.person-social a:hover {
  text-decoration: underline;
}

.person-degree-label {
  display: inline-block;
  background-color: #A7B7BF;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
}

@media screen and (max-width: 640px) {
  .person-profile-top {
    flex-direction: column !important;
  }

  .person-photo {
    margin-right: 0 !important;
    margin-bottom: 1rem !important;
  }

  .person-photo img {
    width: 120px;
    height: 120px;
  }
}

/* ── Course Block Pattern ── */
.course-block {
  border-bottom: 1px solid #E2E2E2;
}

.course-block:last-child {
  border-bottom: none;
}

.course-block-inner {
  gap: 2rem;
  align-items: flex-start;
}

.course-content {
  flex: 1 1 0%;
  min-width: 0;
  max-width: 600px;
}

.course-title { color: #00274C; }
.course-instructor,
.course-instructor-secondary { color: #131516; }
.course-description { line-height: 1.61; color: #131516; }

.course-info-box {
  flex-shrink: 0;
  width: 220px;
  border: 1px solid #A7B7BF;
  padding: 1rem 1.25rem !important;
  background-color: #F5F6F6;
  font-size: 0.875rem;
}

.course-number {
  color: #00274C;
  border-bottom: 1px solid #A7B7BF;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem !important;
}

.course-offered-label { color: #00274C; }

.course-semesters {
  list-style: disc;
  margin-left: 1.25rem !important;
  color: #131516;
}

.course-semesters li {
  color: #131516;
  font-size: 0.875rem;
  line-height: 1.8;
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .course-block-inner {
    flex-direction: column !important;
  }

  .course-info-box {
    width: 100%;
    margin-top: 1.5rem;
  }
}

/* ── Project Entry Pattern ── */
.project-entry {
  border-bottom: 1px solid #E2E2E2;
}

.project-entry:last-child {
  border-bottom: none;
}

.project-title { color: #00274C; }
.project-funder { color: #131516; }
.project-pis { color: #131516; }
.project-dates { color: #646567; }

.project-summary-link a {
  color: #0060A7;
  font-weight: 500;
  text-decoration: none;
}

.project-summary-link a:hover {
  text-decoration: underline;
}

/* ── Section Label Pattern ── */
.seas-section-label {
  display: inline-block;
  background-color: #A7B7BF;
  color: white !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
}

/* ── Content Preview Box ── */
.content-preview-box {
  border: 1px solid #E2E2E2;
  overflow: hidden;
}

.content-preview-label {
  background-color: #A7B7BF;
  color: white !important;
  padding: 0.4rem 0.75rem !important;
  display: block;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.content-preview-inner {
  padding: 1.25rem 1.25rem 1rem 1.25rem !important;
}

.content-preview-entry {
  border-bottom: 1px solid #E2E2E2;
  padding-bottom: 1rem;
}

.content-preview-entry:last-of-type {
  border-bottom: none;
}

.content-preview-entry-title a {
  color: #131516;
  text-decoration: none;
}

.content-preview-entry-title a:hover {
  color: #0060A7;
  text-decoration: underline;
}

.content-preview-entry-excerpt {
  color: #646567;
  line-height: 1.5;
}

.content-preview-view-all a {
  color: #0060A7;
  font-weight: 500;
  text-decoration: none;
}

.content-preview-view-all a:hover {
  text-decoration: underline;
}

/* ── Fieldwork Card ── */
.fieldwork-card {
  border-bottom: 1px solid #E2E2E2;
  padding-bottom: 2rem;
}

.fieldwork-card:last-child {
  border-bottom: none;
}

.fieldwork-card-image img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  display: block;
}

.fieldwork-card-title a {
  color: #0060A7;
  text-decoration: none;
}

.fieldwork-card-title a:hover {
  text-decoration: underline;
}

.fieldwork-card-caption {
  color: #131516;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  .fieldwork-card {
    flex-direction: column !important;
  }

  .fieldwork-card-image {
    margin-right: 0 !important;
    margin-bottom: 1rem !important;
  }

  .fieldwork-card-image img {
    width: 100%;
    height: 200px;
  }
}

/* ── Content area padding and alignment ── */
.wp-block-post-content {
  padding-left: 6rem !important;
  padding-right: 6rem !important;
}

.wp-block-post-content p,
.wp-block-post-content .wp-block-paragraph {
  margin-bottom: 1.5rem;
  max-width: 100%;
  margin-left: 6rem !important;
}

/* ── Remove block gap above hero slider ── */
.wp-site-blocks {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.wp-site-blocks > * + * {
  margin-block-start: 0 !important;
}


/* ── Prevent horizontal overflow ── */
html, body {
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

/* ── Hard stop on horizontal overflow ── */
.wp-site-blocks,
.wp-block-group,
.wp-block-template-part {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── Mobile (768px and below) ── */
@media screen and (max-width: 768px) {

  /* Content padding */
  .wp-block-post-content {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .wp-block-post-content .wp-block-paragraph {
    margin-left: 0 !important;
  }

  /* Slider height */
  .seas-hero-slider,
  .seas-slider-track,
  .seas-slide {
    height: 380px;
  }

  .seas-hero-slider {
    overflow: hidden;
  }

  /* Slide content — full width at bottom */
  .seas-slide-content {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1.5rem !important;
    background: linear-gradient(
      to top,
      rgba(0,39,76,0.95) 0%,
      rgba(0,39,76,0.5) 70%,
      transparent 100%
    );
    justify-content: flex-end;
  }

  .seas-slide-overlay {
    background: rgba(0,39,76,0.2);
  }

  .seas-slide-headline {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  .seas-slide-excerpt {
    display: none;
  }

  /* Columns stack */
  .wp-block-columns {
    flex-direction: column !important;
  }

  /* Hide arrows */
  .seas-slider-prev,
  .seas-slider-next {
    display: none;
  }

}

/* ── Small mobile (480px and below) ── */
@media screen and (max-width: 480px) {

  .wp-block-post-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .wp-block-post-content .wp-block-paragraph {
    margin-left: 0 !important;
  }

  .seas-hero-slider,
  .seas-slider-track,
  .seas-slide {
    height: 320px;
  }

}
.wp-block-post-content .wp-block-image {
  margin-left: 6rem !important;
}