/*
 * Understory Web Companion v0.5.0
 * Based on the actual Understory Obsidian v0.2.2 color + type tokens.
 * Visual customization only: NO widths, grids, spacing systems, positions of
 * theme layout elements, media sizes, or WordPress templates are modified.
 */
:root {
  --us-page: #f3ecdf;
  --us-surface: #f6f0e6;
  --us-sidebar: #ebe1d1;
  --us-border: #d4c5ae;
  --us-text: #302c26;
  --us-heading: #3b332b;
  --us-muted: #746b5e;
  --us-link: #52603c;
  --us-link-hover: #43512f;
  --us-walnut: #6c4f3b;
  --us-gold: #a17e3f;
  --us-rust: #8a5f43;
  --us-selection: #d8d1a9;
  --us-quote-text: #585246;
  --us-academic-panel: #ebe1d1;
  --us-academic-border: #68734f;
  --us-button-bg: #52603c;
  --us-button-text: #f6f0e6;
  --us-text-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --us-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

/* Explicit dark and system-dark use identical original Understory tokens. */
:root[data-understory-preference="dark"] {
  --us-page: #201c18;
  --us-surface: #29231e;
  --us-sidebar: #191612;
  --us-border: #443a31;
  --us-text: #e6dccd;
  --us-heading: #eee4d6;
  --us-muted: #afa391;
  --us-link: #a9b889;
  --us-link-hover: #c0ce9e;
  --us-walnut: #b18a69;
  --us-gold: #c09c58;
  --us-rust: #bd8060;
  --us-selection: #4e513b;
  --us-quote-text: #cfc3b0;
  --us-academic-panel: #302923;
  --us-academic-border: #98a477;
  --us-button-bg: #526442;
  --us-button-text: #f6f0e6;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-understory-preference="light"]):not([data-understory-preference="dark"]) {
    --us-page: #201c18;
    --us-surface: #29231e;
    --us-sidebar: #191612;
    --us-border: #443a31;
    --us-text: #e6dccd;
    --us-heading: #eee4d6;
    --us-muted: #afa391;
    --us-link: #a9b889;
    --us-link-hover: #c0ce9e;
    --us-walnut: #b18a69;
    --us-gold: #c09c58;
    --us-rust: #bd8060;
    --us-selection: #4e513b;
  --us-quote-text: #cfc3b0;
  --us-academic-panel: #302923;
  --us-academic-border: #98a477;
  --us-button-bg: #526442;
  --us-button-text: #f6f0e6;
    color-scheme: dark;
  }
}

/* Shared appearance; body scope means the WordPress admin stays unchanged. */
body.understory-web,
body.understory-web button,
body.understory-web input,
body.understory-web textarea,
body.understory-web select {
  color: var(--us-text);
}
body.understory-web {
  background-color: var(--us-page);
}
body.understory-web ::selection { background: var(--us-selection); color: var(--us-text); }
body.understory-web .site,
body.understory-web .site-content,
body.understory-web .hentry,
body.understory-web .page-header,
body.understory-web .page-content,
body.understory-web .site-footer,
body.understory-web .comments-area,
body.understory-web .post-navigation,
body.understory-web .pagination,
body.understory-web .author-info {
  background-color: var(--us-surface);
  color: var(--us-text);
}
/* Twenty Fifteen's desktop sidebar and responsive nav retain their structure. */
body.understory-web .sidebar,
body.understory-web .secondary,
body.understory-web .site-header,
body.understory-web .main-navigation ul ul {
  background-color: var(--us-sidebar);
  color: var(--us-text);
}

/* Reading typography; interface items intentionally remain sans-serif. */
body.understory-web .entry-content,
body.understory-web .entry-summary,
body.understory-web .page-content,
body.understory-web .comment-content,
body.understory-web .site-description {
  font-family: var(--us-text-serif);
  line-height: 1.68;
}
body.understory-web :is(h1,h2,h3,h4,h5,h6),
body.understory-web .entry-title,
body.understory-web .site-title,
body.understory-web .site-title a,
body.understory-web .widget-title {
  font-family: var(--us-text-serif);
  color: var(--us-heading);
  letter-spacing: -0.012em;
}
body.understory-web :is(.main-navigation,.secondary-toggle,.entry-meta,.entry-footer,.site-info,.understory-switcher),
body.understory-web :is(button,input,select,textarea) {
  font-family: var(--us-interface);
}
body.understory-web .site-description,
body.understory-web .entry-meta,
body.understory-web .entry-footer,
body.understory-web .site-info,
body.understory-web .comment-metadata,
body.understory-web .wp-caption-text,
body.understory-web .widget,
body.understory-web small {
  color: var(--us-muted);
}

body.understory-web a,
body.understory-web a:visited,
body.understory-web .main-navigation a,
body.understory-web .widget a,
body.understory-web .entry-content a {
  color: var(--us-link);
}
body.understory-web a:hover,
body.understory-web a:focus,
body.understory-web .main-navigation a:hover,
body.understory-web .entry-content a:hover {
  color: var(--us-link-hover);
}
body.understory-web a:focus-visible,
body.understory-web :is(button,select,input,textarea):focus-visible {
  outline: 2px solid var(--us-gold);
  outline-offset: 3px;
}
body.understory-web blockquote,
body.understory-web .wp-block-quote {
  color: var(--us-muted);
  border-left-color: var(--us-link);
}
body.understory-web hr,
body.understory-web :is(.entry-footer,.post-navigation,.pagination,.comment-list,.site-footer) {
  border-color: var(--us-border);
}
body.understory-web :is(pre,code,kbd,samp),
body.understory-web .wp-block-code {
  background-color: var(--us-sidebar);
  color: var(--us-text);
}
body.understory-web :is(input:not([type="submit"]):not([type="button"]),textarea,select),
body.understory-web .search-field {
  background-color: var(--us-surface);
  border-color: var(--us-border);
  color: var(--us-text);
}
body.understory-web :is(button,input[type="submit"],.button,.wp-block-button__link) {
  border-color: var(--us-link);
}
body.understory-web :is(button:hover,input[type="submit"]:hover,.button:hover) {
  border-color: var(--us-link-hover);
}
body.understory-web .widget-title,
body.understory-web .site-title,
body.understory-web .entry-title { text-shadow: none; }

/* Compact floating preference control; the existing menu/layout is untouched. */
body.understory-web .understory-switcher {
  position: fixed;
  inset: auto 1rem 1rem auto;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--us-border);
  border-radius: 999px;
  background: var(--us-surface);
  box-shadow: 0 2px 14px rgba(0,0,0,0.12);
  color: var(--us-muted);
  font: 500 12px/1.3 var(--us-interface);
}
body.understory-web .understory-switcher label {
  color: var(--us-muted);
  margin: 0;
  font: inherit;
}
body.understory-web .understory-switcher select {
  width: auto;
  min-width: 0;
  max-width: 8.5rem;
  margin: 0;
  padding: 0.27rem 1.25rem 0.27rem 0.45rem;
  border: 1px solid var(--us-border);
  border-radius: 999px;
  background: var(--us-page);
  color: var(--us-text);
  font: 500 12px/1.4 var(--us-interface);
  cursor: pointer;
}
@media (max-width: 600px) {
  body.understory-web .understory-switcher {
    bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
    right: 0.65rem;
  }
}
@media print {
  body.understory-web .understory-switcher { display: none; }
}

/* ---------- 0.2.0: Twenty Fifteen's left-column background ---------- */
/* Twenty Fifteen paints the *area behind* the sidebar with body::before.
   Without this, the site's old Customizer green peeks out below the sidebar. */
body.understory-web::before,
body.understory-web .site::before {
  background-color: var(--us-sidebar) !important;
}
/* Match the full sidebar surface even when there are short pages. */
body.understory-web .sidebar,
body.understory-web .secondary,
body.understory-web .site-header {
  background-color: var(--us-sidebar) !important;
}

/* ---------- 0.2.0: better dark-mode contrast ---------- */
/* The site's custom CSS uses hard-coded dark grays for pull quotes.
   Restrict these overrides to quote content, not the entire article. */
body.understory-web .entry-content blockquote,
body.understory-web .entry-content blockquote :is(p, em, i, strong, cite, span),
body.understory-web .entry-content .wp-block-quote,
body.understory-web .entry-content .wp-block-quote :is(p, em, i, strong, cite, span) {
  color: var(--us-quote-text) !important;
}
body.understory-web .entry-content blockquote,
body.understory-web .entry-content .wp-block-quote {
  border-left-color: var(--us-link) !important;
}

/* WordPress block buttons, plus common custom CTA classes.  Outline links
   need readable TEXT, not just a moss border. */
body.understory-web .entry-content :is(.wp-block-button__link, a.button, a[class*="cta-button"], a[class*="button-solid"], a[class*="button-primary"]) {
  background-color: var(--us-button-bg) !important;
  border-color: var(--us-button-bg) !important;
  color: var(--us-button-text) !important;
}
body.understory-web .entry-content :is(.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link.is-style-outline, a[class*="button-outline"], a[class*="cta-outline"], a[class*="btn-outline"]) {
  background-color: transparent !important;
  border: 1px solid var(--us-link) !important;
  color: var(--us-link) !important;
}
body.understory-web .entry-content :is(.wp-block-button__link, a.button, a[class*="cta-button"], a[class*="button-solid"], a[class*="button-primary"]):hover {
  background-color: var(--us-link-hover) !important;
  border-color: var(--us-link-hover) !important;
  color: var(--us-button-text) !important;
}
body.understory-web .entry-content :is(.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-button__link.is-style-outline, a[class*="button-outline"], a[class*="cta-outline"], a[class*="btn-outline"]):hover {
  background-color: var(--us-sidebar) !important;
  color: var(--us-link-hover) !important;
}

/* The Academic Profiles panel on the homepage was permanently light-colored.
   JavaScript tags just this existing panel with a class; no layout changes. */
body.understory-web .entry-content .understory-academic-panel {
  background: var(--us-academic-panel) !important;
  border-color: var(--us-academic-border) !important;
  color: var(--us-text) !important;
}
body.understory-web .entry-content .understory-academic-panel :is(h1,h2,h3,h4,h5,h6,p,span,strong,em,li) {
  color: var(--us-text) !important;
}
body.understory-web .entry-content .understory-academic-panel :is(a,a:visited) {
  color: var(--us-link) !important;
  text-decoration-color: var(--us-link);
}
body.understory-web .entry-content .understory-academic-panel a:hover {
  color: var(--us-link-hover) !important;
}

/* Jetpack's 'Like' area may be an external iframe. Respect its isolated
   styles and only theme its outer container; never hide the widget. */
body.understory-web :is(.jetpack-likes-widget-wrapper,.sharedaddy,.sd-sharing-enabled) {
  color: var(--us-text);
}

/* A pair of homepage outlined CTAs are custom links rather than native block
   buttons, so label-based tagging protects them from an unreadable old green. */
body.understory-web .entry-content a.understory-cta-outline,
body.understory-web .entry-content a.understory-cta-outline:visited {
  color: var(--us-link) !important;
  border-color: var(--us-link) !important;
  background-color: transparent !important;
}
body.understory-web .entry-content a.understory-cta-outline:hover,
body.understory-web .entry-content a.understory-cta-outline:focus-visible {
  color: var(--us-link-hover) !important;
  background-color: var(--us-sidebar) !important;
}

/* ---------- 0.3.0: Twenty Fifteen post metadata panel ---------- */
/* Twenty Fifteen gives .entry-footer an opaque light background, which made
   a big white rectangle at the foot of every post in dark mode. This is
   native theme markup, unlike the cross-origin Jetpack Likes/comment iframes. */
body.understory-web .entry-footer {
  background: var(--us-academic-panel) !important;
  color: var(--us-muted) !important;
  border-color: var(--us-border) !important;
}
body.understory-web .entry-footer :is(.posted-on, .byline, .cat-links, .tags-links, .edit-link, .comments-link, .format, .full-size-link),
body.understory-web .entry-footer :is(time, .screen-reader-text) {
  color: var(--us-muted) !important;
}
body.understory-web .entry-footer :is(a, a:visited) {
  color: var(--us-link) !important;
}
body.understory-web .entry-footer a:hover {
  color: var(--us-link-hover) !important;
}
/* Constrain styling to theme-owned surfaces. We intentionally do not use
   global div/iframe inversion because that would degrade form accessibility,
   make photos look wrong and break external embedded widgets. */
body.understory-web .post-navigation,
body.understory-web .post-navigation .nav-links,
body.understory-web .navigation.pagination {
  background-color: var(--us-surface);
}

/* ---------- 0.4.0: three homepage Current Research cards ---------- */
/* These Gutenberg/custom cards have inline ivory backgrounds and pale text
   meant for an older light palette. Marked narrowly in JS by their known
   research-paper titles; don't recolor all .wp-block-group blocks. */
:root[data-understory-preference="dark"] body.understory-web .entry-content .understory-research-card {
  background: #302923 !important;
  border-color: #98a477 !important;
  color: #e6dccd !important;
}
:root[data-understory-preference="dark"] body.understory-web .entry-content .understory-research-card :is(p,span,strong,em,small,h1,h2,h3,h4,h5,h6,li) {
  color: #e6dccd !important;
}
:root[data-understory-preference="dark"] body.understory-web .entry-content .understory-research-card :is(a,a:visited) {
  color: #b7c59a !important;
  text-decoration-color: #98a477 !important;
}
:root[data-understory-preference="dark"] body.understory-web .entry-content .understory-research-card a:hover,
:root[data-understory-preference="dark"] body.understory-web .entry-content .understory-research-card a:focus-visible {
  color: #d1deb3 !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-understory-preference="light"]):not([data-understory-preference="dark"]) body.understory-web .entry-content .understory-research-card {
    background: #302923 !important;
    border-color: #98a477 !important;
    color: #e6dccd !important;
  }
  :root:not([data-understory-preference="light"]):not([data-understory-preference="dark"]) body.understory-web .entry-content .understory-research-card :is(p,span,strong,em,small,h1,h2,h3,h4,h5,h6,li) {
    color: #e6dccd !important;
  }
  :root:not([data-understory-preference="light"]):not([data-understory-preference="dark"]) body.understory-web .entry-content .understory-research-card :is(a,a:visited) {
    color: #b7c59a !important;
    text-decoration-color: #98a477 !important;
  }
  :root:not([data-understory-preference="light"]):not([data-understory-preference="dark"]) body.understory-web .entry-content .understory-research-card a:hover,
  :root:not([data-understory-preference="light"]):not([data-understory-preference="dark"]) body.understory-web .entry-content .understory-research-card a:focus-visible {
    color: #d1deb3 !important;
  }
}


/* ---------- 0.5.0: previous/next post photo cards ---------- */
/* Twenty Fifteen uses a featured image on .nav-previous / .nav-next
   and a semi-transparent overlay on its link's ::before. Earlier theme
   colors leave the upper card muddy and its title hard to distinguish.
   These overrides preserve the photographs, exact layout and links. */
body.understory-web .post-navigation :is(.nav-previous, .nav-next) {
  background-color: #29231e !important; /* also useful when no featured image */
  background-position: center center;
  background-size: cover;
}
body.understory-web .post-navigation :is(.nav-previous, .nav-next) a::before {
  /* Warm charcoal gradient, never the bright/mid-gray default overlay. */
  background: linear-gradient(0deg, rgba(17, 15, 13, 0.83), rgba(17, 15, 13, 0.58)) !important;
  opacity: 1 !important;
}
body.understory-web .post-navigation :is(.nav-previous, .nav-next) a:hover::before,
body.understory-web .post-navigation :is(.nav-previous, .nav-next) a:focus-visible::before {
  background: linear-gradient(0deg, rgba(17, 15, 13, 0.9), rgba(17, 15, 13, 0.65)) !important;
}
/* WordPress injects per-post inline white titles when a photo is present;
   enforce identical legibility for posts that lack a thumbnail. */
body.understory-web .post-navigation :is(.nav-previous, .nav-next) :is(.post-title, .meta-nav),
body.understory-web .post-navigation :is(.nav-previous, .nav-next) a:hover :is(.post-title, .meta-nav),
body.understory-web .post-navigation :is(.nav-previous, .nav-next) a:focus-visible :is(.post-title, .meta-nav) {
  color: #f6f0e6 !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.62);
}
body.understory-web .post-navigation :is(.nav-previous, .nav-next) a:focus-visible {
  outline: 2px solid #c09c58;
  outline-offset: -4px;
}