@charset "UTF-8";

/*
Theme Name: wnmu
Theme URI: NA
Author: NA
Author URI: NA
Description: NA
Requires at least: 5.3
Tested up to: 6.8
Requires PHP: 5.6
Version: 0.0.0
License: GNU NA
License URI: NA
Text Domain: NA
Tags: NA
*/

/* NOTES
   Wordpress body-content tag hierarchy goes as such:
       body > #page > #content > #primary > #main
*/

/* Assets */
@font-face { font-family: "Outfit"; src: url("/wp-content/themes/wnmu/assets/fonts/Outfit/static/Outfit-Regular.ttf")   format("opentype"); font-style: normal; font-weight: 400; }
@font-face { font-family: "Outfit"; src: url("/wp-content/themes/wnmu/assets/fonts/Outfit/static/Outfit-SemiBold.ttf") format("opentype"); font-style: normal; font-weight: 600; }
@font-face { font-family: "Outfit"; src: url("/wp-content/themes/wnmu/assets/fonts/Outfit/static/Outfit-Bold.ttf")     format("opentype"); font-style: normal; font-weight: 700; }
@font-face { font-family: "Outfit"; src: url("/wp-content/themes/wnmu/assets/fonts/Outfit/static/Outfit-ExtraBold.ttf") format("opentype"); font-style: normal; font-weight: 800; }
/* @font-face { font-family: "Crimson Text"; src: url("/wp-content/themes/wnmu/assets/fonts/crimson-text/CrimsonText-Regular.ttf") format("opentype"); font-style: normal; font-weight: normal; } */
/* @font-face { font-family: "Crimson Text"; src: url("/wp-content/themes/wnmu/assets/fonts/crimson-text/CrimsonText-Bold.ttf")    format("opentype"); font-style: normal; font-weight: bold; } */

/* Site config */
:root {
  /* Layout*/
  --content-max-width: 1520px;
  --mobile-content-edge-padding: 20px;
  --mobile-content-max-width: min(var(--content-max-width), calc(100% - var(--mobile-content-edge-padding) * 2));

  /* Typography */
  --font-family: Outfit, Helvetica, Arial, sans-serif;
  --font-size-root: 17px;
  --line-height-root: 1.4;
  /* --font-size-root-mobile: 17px; */
  /* --line-height-root-mobile: 27px; */
  /* --max-width: 100%; */

  /* Colors */
  --color-text-color            : hsl(0 0% 0% / 1);
  --color-primary-blue          : hsl(225 59% 35% / 1);
  --color-primary-teal          : hsl(176deg 81% 36% / 1);
  --color-primary-orange        : hsl(19deg 89% 54% / 1);
  --color-primary-purple        : hsl(269deg 53% 27% / 1);
  --color-primary-navy          : #232c75;
  --color-primary-deep-purple   : #2d0f52;
  --color-primary-yellow        : hsl(41deg 97% 59% / 1);
  /* Link color set to brand blue for WCAG AA: the previous hsl(210 100% 48%)
     (#007af5) was only 4.11:1 on white (need 4.5:1). Brand blue is 9.6:1.
     Note: this is the global <a> color (see `a {}` below) and is tuned for
     links on light backgrounds — links placed on dark sections need a local
     override, as brand blue on dark is low-contrast. */
  --color-link                  : var(--color-primary-blue);
  --color-heading               : hsl(0 0% 20%);

  /* Element styles */
  --p-margin: 1rem;
  --ul-margin: 1.25rem;

  /* Post/page content */
  --post-content-max-width: 900px;
}

html {
  /* WP sets this to a weird margin in an attempt to position the admin bar. Reset it to 0. */
  margin-top: 0 !important;
}

#wpadminbar { position: absolute !important; }

html, body {
  position: relative;
  font-family: var(--font-family);
  font-size: var(--font-size-root);
  line-height: var(--line-height-root);
}

/* All sizes are relative root font size. */
h1, h2, h3, h4, h5, h6 { color: var(--color-heading); }
h1 { font-size: 2.50rem;  line-height: 1.2;  margin: 2.50rem 0 1.10rem; }
h2 { font-size: 2.00rem;  line-height: 1.3;  margin: 2.50rem 0 0.80rem; }
h3 { font-size: 1.75rem;  line-height: 1.4;  margin: 2.50rem 0 0.60rem; }
h4 { font-size: 1.50rem;  line-height: 1.4;  margin: 2.50rem 0 0.50rem; }
h5 { font-size: 1.25rem;  line-height: 1.5;  margin: 1.50rem 0 0.30rem; }
h6 { font-size: 1.00rem;  line-height: 1.5;  margin: 1.50rem 0 0.30rem; }

p { margin: 0 0 var(--p-margin); line-height: inherit; color: var(--color-text-color); }
ol, ul { margin: 0 0 var(--ul-margin); padding: 0; line-height: inherit; color: var(--color-text-color); }
li { list-style-position: inside; }
li > ul, li > ol { margin-top: 0.5rem; margin-bottom: 0.5rem; padding-left: 1.5rem; }

.w-badge {
  display: inline-block; padding: 8px 16px;
  font-weight: bold; text-decoration: none;
  color: hsl(0 0% 100% / 1);
  background: hsl(0 0% 0% / 1); border-radius: 7px;
  transition: filter ease-in-out 200ms;
}

a { color: var(--color-link); }

/* Dark mode link color (WCAG AA). The light-mode link color is brand blue,
   which is only ~1.4:1 on the dark-mode background (#28303d) — unreadable.
   This lightened brand-hue blue is 4.95:1 there. We override the anchor TEXT
   color only (not --color-link itself), so components that use --color-link as
   a *background* — e.g. the directory buttons' hover state — keep their
   white-on-brand-blue contrast in dark mode. */
.is-dark-theme a { color: hsl(225 60% 70% / 1); }

a.w-badge:hover { filter: brightness(0.8); }

/* Custom footer badges: one standard height for every badge, with or
   without a sublabel or glyph, so badges sharing a row stay visually
   consistent. min-height fits a label + sublabel; shorter content is
   vertically centered. The glyph is a fixed square matching that height —
   it can never stretch the badge, however large the source image is.
   Scoped to .com-custom-footer so w-badge uses elsewhere are untouched. */
.com-custom-footer .w-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.5em;
}
.com-custom-footer .w-badge .w-badge-media {
  width: 2.5em;
  height: 2.5em;
  flex: none;
}
.w-badge img.w-badge-media { object-fit: contain; }

/* Optional smaller second line under a badge label (custom footer links).
   Inherits the badge text color so contrast on the colored badge backgrounds
   stays identical to the main label (WCAG AA) — no opacity tricks. */
.w-badge .w-badge-sublabel {
  display: block;
  font-size: 0.8em;
  font-weight: normal;
  line-height: 1.3;
}

.w-badge-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  --color-1: var(--color-primary-blue);
  --color-2: var(--color-primary-teal);
  --color-3: var(--color-primary-orange);
  --color-4: var(--color-primary-yellow);
  --color-5: var(--color-primary-purple);
  .w-badge:nth-of-type(1)    { background: var(--color-1); }
  .w-badge:nth-of-type(2)    { background: var(--color-2); }
  .w-badge:nth-of-type(3)    { background: var(--color-3); }
  .w-badge:nth-of-type(4)    { background: var(--color-4); }
  .w-badge:nth-of-type(5)    { background: var(--color-5); }
  .w-badge:nth-of-type(5n+1) { background: var(--color-1); }
  .w-badge:nth-of-type(5n+2) { background: var(--color-2); }
  .w-badge:nth-of-type(5n+3) { background: var(--color-3); }
  .w-badge:nth-of-type(5n+4) { background: var(--color-4); }
  .w-badge:nth-of-type(5n+5) { background: var(--color-5); }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 0.5rem;
  border: solid black 1px;
}


/* ============================================================
   Pages, posts
   ============================================================ */

.entry-header {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

#main { padding-bottom: 4rem; }

/* Single post/page container */
.single #main > article,
.page #main > article {
  max-width: var(--post-content-max-width);
  margin-inline: auto;
  padding: 2.5rem var(--mobile-content-edge-padding) 5rem;
}
.single #main > article {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Featured image */
.post-thumbnail img {
  width: 100%; height: auto;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

/* Post body */
.entry-content { line-height: 1.75; }

/* Fix list indentation (global styles reset padding to 0) */
.entry-content ul,
.entry-content ol { padding-left: 1.75rem; }
.entry-content li { list-style-position: outside; }
.entry-content ul > li { list-style-type: disc; }
.entry-content ol > li { list-style-type: decimal; }
.entry-content ul ul > li { list-style-type: circle; }
.entry-content ul ul ul > li { list-style-type: square; }

/* Blockquote */
.entry-content blockquote {
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--color-primary-teal);
  background: hsl(0 0% 97%);
  font-style: italic;
  border-radius: 0 6px 6px 0;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }

/* Code */
.entry-content code {
  font-family: ui-monospace, monospace;
  font-size: 0.875em;
  padding: 2px 5px;
  background: hsl(0 0% 93%);
  border-radius: 4px;
}
.entry-content pre {
  padding: 1.25rem 1.5rem;
  background: hsl(220 16% 18%);
  color: hsl(0 0% 93%);
  border-radius: 6px;
  overflow-x: auto;
  line-height: 1.6;
}
.entry-content pre code { background: none; padding: 0; color: inherit; font-size: 1em; }

/* Images */
.entry-content img { max-width: 100%; height: auto; }
.entry-content figure { margin: 1.5rem 0; }
.entry-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: hsl(0 0% 45%);
  text-align: center;
}
.aligncenter {
  display: block;
  float: none;
  margin-right: auto;
  margin-left: auto;
}
/* WordPress image alignment: float the image and let text wrap beside it.
   Core ships these classes on the markup but leaves the styling to the theme,
   so without these rules an "alignleft" image just renders inline (no wrap).
   The asymmetric margin adds breathing room between the image and the wrapping
   text on the side the text flows: gap on the RIGHT for left-aligned images,
   gap on the LEFT for right-aligned images. */
.alignleft {
  float: left;
  margin: 0.25rem 1.5rem 1rem 0;
}
.alignright {
  float: right;
  margin: 0.25rem 0 1rem 1.5rem;
}
.alignnone {
  float: none;
  margin: 1rem 0;
}
/* On narrow screens, floating + wrapping looks cramped; stack and center
   instead so the image stays readable (responsive/accessibility). */
@media (max-width: 600px) {
  .alignleft,
  .alignright {
    float: none;
    display: block;
    margin: 1rem auto;
  }
}

/* Horizontal rule */
.entry-content hr { border: none; border-top: 1px solid hsl(0 0% 85%); margin: 2rem 0; }

/* Entry footer: categories, tags */
.entry-footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(0 0% 88%);
  font-size: 0.875rem;
  color: hsl(0 0% 45%);
}

/* Separate "Published …" and "Edit" with dots */
.posted-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0;
}
.posted-by .byline { display: none; }
.posted-by .posted-on::after {
  content: '·';
  margin: 0 0.5rem;
  color: hsl(0 0% 70%);
}

.entry-footer .edit-link::before { content: '·'; margin: 0 0.5rem; color: hsl(0 0% 70%); }
.posted-by .edit-link::before { content: none; margin: 0; }

.post-taxonomies { margin-top: 0.4rem; }
.post-taxonomies .cat-links,
.post-taxonomies .tags-links { display: block; }

/* Post meta (date, author) */
.entry-meta {
  font-size: 0.875rem;
  color: hsl(0 0% 45%);
  margin-bottom: 0.5rem;
}

/* Prev/next post navigation */
.post-navigation {
  max-width: none;
  margin-inline: 0;
  padding: 2rem var(--mobile-content-edge-padding);
  border-top: 1px solid hsl(0 0% 88%);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
.post-navigation .nav-previous,
.post-navigation .nav-next { flex: 1; }
.post-navigation .nav-next { text-align: right; }
.post-navigation a { text-decoration: none; }
.post-navigation .meta-nav {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(0 0% 55%);
  margin-bottom: 0.25rem;
}
.post-navigation .post-title { font-weight: 600; color: var(--color-link); }

/* Unified search results — current site + WNMU network in one ranked list.
   Row spacing and dividers come from the generic ".search article" /
   ".search-results article" rules further down; here we only style the source
   badge, the result title, the excerpt, and the merged-list pagination. */

/* "From <site>" badge — shown only on rows NOT from the current site, so a
   visitor can see at a glance which WNMU subsite a result lives on. */
.search-result-source {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--color-primary-blue);
  padding: 2px 7px;
  border-radius: 3px;
  margin-bottom: 0.4rem;
}
.search-result-item-title {
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
}
.search-result-item-title a { text-decoration: none; color: var(--color-heading); }
.search-result-item-title a:hover { color: var(--color-link); }
.search-result-excerpt {
  font-size: 0.9rem;
  color: hsl(0 0% 40%);
  margin: 0.25rem 0 0;
  line-height: 1.6;
}

/* Merged-results pagination (in-template ?spage= paging). */
.search-pagination {
  margin: 2.5rem 0 1rem;
}
.search-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-pagination .page-numbers li { margin: 0; list-style: none; }
.search-pagination a.page-numbers,
.search-pagination span.page-numbers {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border: 1px solid hsl(0 0% 82%);
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  color: var(--color-text-color);
}
.search-pagination a.page-numbers:hover {
  border-color: var(--color-primary-blue);
  color: var(--color-primary-blue);
}
.search-pagination span.current {
  background: var(--color-primary-blue);
  border-color: var(--color-primary-blue);
  color: #fff;
}

.search-section-heading {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}

/* Directory search — tabbed layout */
.search-section-heading-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.search-section-heading-row .search-section-heading {
  margin: 0;
  line-height: 1;
}
.directory-heading-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.directory-heading-links a {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-link);
  border: 2px solid var(--color-link);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.directory-heading-links a:hover { background: var(--color-link); color: #fff; }
.dir-tabs {
  margin-top: 0;
  border: 1px solid hsl(220 20% 88%);
  border-radius: 8px;
  overflow: hidden;
}
.dir-tabs__nav {
  display: flex;
  background: hsl(220 30% 97%);
  border-bottom: 1px solid hsl(220 20% 88%);
}
.dir-tabs__tab {
  flex: 1;
  padding: 1.05rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(0 0% 40%);
  background: transparent;
  border: none;
  border-right: 1px solid hsl(220 20% 88%);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.dir-tabs__tab:hover {
  background: hsl(220 25% 93%);
  color: hsl(0 0% 20%);
}
.dir-tabs__tab:last-child { border-right: none; }
.dir-tabs__tab.is-active {
  color: var(--color-primary-blue, #003082);
  border-bottom-color: var(--color-primary-blue, #003082);
  background: #fff;
}
.dir-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0 0.4em;
  height: 1.5em;
  font-size: 0.8em;
  font-weight: 700;
  background: hsl(220 15% 84%);
  border-radius: 999px;
  color: hsl(0 0% 35%);
  transition: background 0.15s, color 0.15s;
}
.dir-tabs__tab.is-active .dir-tabs__count {
  background: var(--color-primary-blue, #003082);
  color: #fff;
}
/* Tabs that actually contain results: give the count a filled brand-blue badge
   so a visitor can see at a glance which tab has something in it, even before
   clicking. Empty tabs stay dimmed with the default grey badge. */
.dir-tabs__tab.has-results .dir-tabs__count {
  background: var(--color-primary-blue, #003082);
  color: #fff;
}
.dir-tabs__tab.is-empty {
  color: hsl(0 0% 60%);
}
.dir-tabs__panel {
  display: none;
  padding: 0 1.5rem 0.5rem;
  background: #fff;
}
.dir-tabs__panel.is-active { display: block; }
.dir-tabs__empty {
  padding: 1.25rem 0;
  color: hsl(0 0% 50%);
  font-size: 0.9rem;
  font-style: italic;
}
.dir-tabs__hint {
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: #fff;
  color: hsl(0 0% 50%);
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}
.directory-search-link { margin: 1rem 0 0; text-align: right; font-size: 0.9rem; }
.directory-search-link a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  text-decoration: none;
  color: var(--color-link);
  border: 2.5px solid var(--color-link);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.directory-search-link a:hover { background: var(--color-link); color: #fff; }
.personnel-search-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid hsl(0 0% 91%);
}
.directory-search-link + .personnel-search-item { padding-top: 0.75rem; }
.personnel-search-item:last-child { border-bottom: none; }
.personnel-search-name {
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}
.personnel-search-meta {
  font-size: 0.9rem;
  color: hsl(0 0% 35%);
  margin-bottom: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.personnel-search-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.personnel-search-name-row .personnel-search-name { margin-bottom: 0; }
.personnel-search-title { font-weight: 600; }
.personnel-search-contact {
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  align-items: center;
  color: hsl(0 0% 40%);
}
.personnel-search-contact a {
  color: var(--color-link);
  text-decoration: none;
}
.personnel-search-contact a:hover { text-decoration: underline; }
.personnel-search-location::before { content: "📍 "; }
.personnel-search-email::before   { content: "✉ "; }
.personnel-search-phone::before   { content: "📞 "; }
.dept-search-website::before      { content: "🔗 "; }
.personnel-search-view-btn {
  padding: 3px 10px 2px;
  font-size: 0.8rem; font-weight: 500;
  color: #fff;
  background: #0066cc;
  border: none; border-radius: 3px;
  cursor: pointer;
  transition: background 0.2s;
  line-height: 1.6;
}
.personnel-search-view-btn:hover { background: #0052a3; text-decoration: none; }
.personnel-search-view-btn:active { background: #003d7a; }
a.personnel-search-view-btn { text-decoration: none; }
.dept-visit-btn {
  display: inline-block;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: #0066cc;
  border: 2px solid #0066cc;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.dept-visit-btn:hover { background: #0052a3; border-color: #0052a3; text-decoration: none; }

/* Personnel modal — shared across directory, search, and team pages */
.swal2-container { z-index: 100000 !important; }
.pm-popup { text-align: left !important; overflow: hidden !important; border-radius: 12px !important; --swal2-close-button-position: absolute; --swal2-close-button-inset: 0.2rem 0.05rem auto auto; }
.pm-popup .swal2-close { color: rgba(255,255,255,0.8) !important; }
.pm-popup .swal2-close:hover { color: #fff !important; }
.pm-popup .swal2-title { font-size: 1.5rem !important; text-align: left !important; width: 100% !important; margin: 0 !important; padding: 28px 24px !important; background: #42196F !important; color: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important; }
.pm-body { text-align: left !important; }
.pm-portrait-wrap { margin: 0 0 4px; text-align: center; }
.pm-portrait { width: 200px; height: 250px; object-fit: cover; border-radius: 12px; background: #f0f0f1; box-shadow: 0 1px 4px rgba(0,0,0,0.15); }
.pm-portrait--placeholder { box-shadow: none; }
.pm-portrait-wrap + .pm-section { border-top: none; padding-top: 0; }
.pm-section { padding-top: 18px; margin-bottom: 18px; border-top: 1px solid #e9ecef; }
.pm-section:first-child { border-top: none; padding-top: 0; }
.pm-section:last-child { margin-bottom: 0; }
.pm-section h3 { margin: 0 0 10px; font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #0066cc; }
.pm-section p { margin: 6px 0; color: #333; white-space: pre-line; line-height: 1.4; }
.pm-section p strong { display: inline-block; min-width: 140px; color: #666; font-weight: 500; }
.pm-section p strong::after { content: ":"; }
.pm-section p span { color: #1a1a1a; }
.pm-section a { color: #0066cc; text-decoration: none; }
.pm-section a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  /* Stack label above value, but group each pair: label hugs its value, with
     more space between pairs so "Title / value" reads as one unit. */
  .pm-section p { margin: 14px 0; line-height: 1.3; }
  .pm-section p strong { display: block; margin-bottom: 0; }
  .pm-section p strong::after { content: ""; }
}

/* Archive / blog / search listing */
.blog #main,
.archive #main,
.search #main {
  max-width: none;
  margin-inline: 0;
  padding: 2rem 0;
}
.blog article,
.archive article,
.search article { padding: 2rem 0; border-bottom: 1px solid hsl(0 0% 88%); }
.blog article:last-of-type,
.archive article:last-of-type,
.search article:last-of-type { border-bottom: none; }
.blog .entry-title,
.archive .entry-title,
.search .entry-title { margin-top: 0.25rem; font-size: 1.5rem; }
.blog .entry-title a,
.archive .entry-title a,
.search .entry-title a { text-decoration: none; color: var(--color-heading); }
.blog .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover { color: var(--color-link); }

/* Compact main search results */
.search-results article { padding: 0.75rem 0; }
.search-results .entry-title { font-size: 1.2rem; margin-top: 0; margin-bottom: 0.2rem; }
.search-results .post-thumbnail { display: none; }
.search-results .entry-content { margin-top: 0; font-size: 0.9rem; }
.search-results .entry-content p { margin-top: 0; margin-bottom: 0; }
.search-results .entry-footer { margin-top: 0.4rem; padding-top: 0; border-top: none; font-size: 0.8rem; }

/* Post type badge + date on search results */
.search-result-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
}
.search-result-type {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: hsl(0 0% 91%);
  color: hsl(0 0% 38%);
}
.search-result-date {
  color: hsl(0 0% 50%);
}


/* ============================================================
   Sidebar layout
   ============================================================ */

.single .site-content,
.blog .site-content,
.archive .site-content {
  display: flex;
  align-items: flex-start;
  gap: 5rem;
  max-width: calc(var(--post-content-max-width) + 220px + 3rem);
  margin-inline: auto;
  padding-inline: var(--mobile-content-edge-padding);
}

.single .content-area,
.blog .content-area,
.archive .content-area {
  flex: 1;
  min-width: 0;
}

/* Search results have no sidebar, so #content is not a flex row here.
   Constrain it to the standard content width and center it so results
   line up under the alignwide page header instead of running full-viewport. */
.search .site-content {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--mobile-content-edge-padding);
}

.widget-area {
  width: 220px;
  flex-shrink: 0;
  padding-top: 2.5rem;
}

/* Sidebar widgets */
.sidebar-widget {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid hsl(0 0% 90%);
}
.sidebar-widget:last-child { border-bottom: none; }

.sidebar-widget-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: hsl(0 0% 50%);
  margin: 0 0 0.875rem;
}

.sidebar-post-list,
.sidebar-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-post-list li,
.sidebar-link-list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid hsl(0 0% 93%);
  list-style: none;
}
.sidebar-post-list li:last-child,
.sidebar-link-list li:last-child { border-bottom: none; }

.sidebar-post-list a,
.sidebar-link-list a {
  text-decoration: none;
  color: var(--color-text-color);
  font-size: 0.875rem;
  line-height: 1.4;
}
.sidebar-post-list a:hover,
.sidebar-link-list a:hover { color: var(--color-link); }

.sidebar-post-list li.is-active a { color: var(--color-primary-blue); font-weight: 600; }

.sidebar-post-date {
  display: block;
  font-size: 0.8rem;
  color: hsl(0 0% 55%);
  margin-top: 0.15rem;
}

/* Search form in sidebar */
.sidebar-widget .search-form { display: flex; gap: 0.5rem; }
.sidebar-widget .search-form label { display: none; }
.sidebar-widget .search-field {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border: 1px solid hsl(0 0% 78%);
  border-radius: 4px;
  font-size: 0.875rem;
  font-family: inherit;
}
.sidebar-widget .search-submit {
  padding: 0.45rem 0.875rem;
  background: var(--color-primary-blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
}
.sidebar-widget .search-submit:hover { opacity: 0.88; }

/* Mobile: stack sidebar below content */
@media (max-width: 860px) {
  .single .site-content,
  .blog .site-content,
  .archive .site-content {
    flex-direction: column;
  }
  .widget-area {
    width: 100%;
    border-top: 1px solid hsl(0 0% 88%);
    padding-top: 2rem;
  }
}

/* ============================================================
   Comments
   ============================================================ */

.comments-area {
  max-width: var(--post-content-max-width);
  margin-inline: auto;
  padding: 2rem var(--mobile-content-edge-padding) 4rem;
  border-top: 1px solid hsl(0 0% 88%);
}
.single .comments-area {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.comments-title,
.comment-reply-title {
  font-size: 1.25rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Comment list */
.comment-list { margin: 0; padding: 0; list-style: none; }
.comment-list .children { margin: 0; padding: 0; list-style: none; }

.comment-body {
  padding: 1.25rem 0;
  border-bottom: 1px solid hsl(0 0% 92%);
}
.comment-list > li:last-child > .comment-body { border-bottom: none; }

/* Nested replies */
.comment-list .children {
  padding-left: 1.5rem;
  border-left: 2px solid hsl(0 0% 90%);
  margin-top: 0.5rem;
}

/* Avatar floated left so author name + date + content wrap around it */
.comment-author .avatar {
  float: left;
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.85rem;
  margin-top: 2px;
}

/* Author name + metadata sit to the right of the avatar */
.comment-meta { overflow: hidden; margin-bottom: 0.75rem; }
.comment-author .fn { font-weight: 600; font-style: normal; }
.comment-author a { text-decoration: none; color: inherit; }
.comment-metadata {
  font-size: 0.8rem;
  color: hsl(0 0% 50%);
}
.comment-metadata a { color: inherit; text-decoration: none; }
.comment-metadata a:hover { text-decoration: underline; }

/* Comment text */
.comment-content { clear: both; }
.comment-content p:last-child { margin-bottom: 0; }

/* Reply link */
.comment-body .reply { margin-top: 0.5rem; }
.comment-reply-link {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  color: hsl(0 0% 50%);
}
.comment-reply-link:hover { color: var(--color-link); }

/* Awaiting moderation notice */
.comment-awaiting-moderation {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: hsl(0 0% 55%);
  font-style: italic;
}

/* Comment form */
.comment-respond { margin-top: 2.5rem; }

.comment-form p { margin-bottom: 1rem; }

.comment-form label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.3rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid hsl(0 0% 75%);
  border-radius: 6px;
  background: hsl(0 0% 99%);
  transition: border-color ease-out 150ms;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--color-primary-teal);
}

.comment-form textarea { min-height: 140px; resize: vertical; }

.comment-form .submit {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(0 0% 100%);
  background: var(--color-primary-purple);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background ease-out 150ms;
}
.comment-form .submit:hover { background: var(--color-primary-teal); }

.comment-notes, .logged-in-as {
  font-size: 0.875rem;
  color: hsl(0 0% 50%);
}

/* Pagination */
.comments-pagination {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
}

/* Interim migrated pages */
.int-page {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--mobile-content-edge-padding);
  font-family: var(--font-family);
}

/* Assert WNMU heading scale — beats Elementor widget font-size overrides */
.int-page h1, .int-page .elementor-heading-title.elementor-size-xxl { font-size: 2.50rem; line-height: 1.2; color: var(--color-heading); font-family: var(--font-family); }
.int-page h2, .int-page .elementor-heading-title.elementor-size-xl  { font-size: 2.00rem; line-height: 1.3; color: var(--color-heading); font-family: var(--font-family); }
.int-page h3, .int-page .elementor-heading-title.elementor-size-large{ font-size: 1.75rem; line-height: 1.4; color: var(--color-heading); font-family: var(--font-family); }
.int-page h4, .int-page .elementor-heading-title.elementor-size-medium{ font-size: 1.50rem; line-height: 1.4; color: var(--color-heading); font-family: var(--font-family); }
.int-page h5                                                          { font-size: 1.25rem; line-height: 1.5; color: var(--color-heading); font-family: var(--font-family); }
.int-page h6, .int-page .elementor-heading-title.elementor-size-default{ font-size: 1.00rem; line-height: 1.5; color: var(--color-heading); font-family: var(--font-family); }

/* Override Elementor's hardcoded tablet/mobile breakpoint container widths
   so int-page content stretches to the site's standard max-width. */
.int-page .e-con,
.int-page .elementor-section.elementor-section-boxed > .elementor-container {
  --container-max-width: var(--content-max-width);
}

/* Plugins */
/* Events manager plugin */
.em {
  max-width: var(--content-max-width);
  margin-inline: auto;
}

/* ── Int-migrated pages: shared hero header centering ── */

/* Hero section (first e-con child of the outer e-parent): center children */
.int-page .e-con.e-parent > .e-con.e-child:first-child {
  align-items: center !important;
  justify-content: center !important;
}

/* Inner container (boxed or plain): center itself within the hero */
.int-page .e-con.e-parent > .e-con.e-child:first-child > .e-con {
  align-self: center !important;
}

/* Breadcrumb page-header text: center */
.int-page .tpcore-page-header {
  text-align: center !important;
}

/* Subtitle heading inside the hero: center */
.int-page .e-con.e-parent > .e-con.e-child:first-child .elementor-heading-title {
  text-align: center;
}

/* Override parent theme's 1240px alignwide cap */
@media only screen and (min-width: 822px) {
  :root {
    --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1520px);
  }
}