/* ==========================================================================
   WordPress-only corrections.

   The static site has no admin bar and no editor-authored content. These two
   small blocks handle both. Everything is scoped, so nothing here can change
   how the site looks to a logged-out visitor.
   ========================================================================== */

/* ---------- admin bar -----------------------------------------------------
   WordPress pins a 32px bar (46px on small screens) to the top of the window.
   The site header is position:sticky;top:0, so without this it would sit
   underneath the bar. Offsetting the sticky top is enough — WordPress already
   pushes the document down via its own html{margin-top} rule. */
.admin-bar .hdr {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .hdr {
    top: 46px;
  }
}

/* The mobile nav measures itself against the viewport; take the bar off that
   height so the last item is never cut off. */
.admin-bar .mobnav {
  max-height: calc(100vh - var(--header-h) - 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar .mobnav {
    max-height: calc(100vh - var(--header-h) - 46px);
  }
}

/* Overlays are position:fixed and cover the whole viewport, including the
   admin bar. Start them below it so the bar stays reachable. */
.admin-bar .mbk,
.admin-bar .lb {
  top: 32px;
}

.admin-bar .lb-x {
  top: 54px;
}

@media screen and (max-width: 782px) {
  .admin-bar .mbk,
  .admin-bar .lb {
    top: 46px;
  }
  .admin-bar .lb-x {
    top: 58px;
  }
}

/* On phones WordPress un-sticks its bar, so ours should not compensate. */
@media screen and (max-width: 600px) {
  .admin-bar .hdr {
    top: 0;
  }
  .admin-bar .mbk,
  .admin-bar .lb {
    top: 0;
  }
  .admin-bar .lb-x {
    top: 12px;
  }
}

/* ---------- editor content ------------------------------------------------
   Ordinary WordPress pages (ones an editor creates outside the Social Science
   route map) render through template-parts/content-page.php. The design system
   deliberately resets list and heading margins, so restore readable flow for
   editor-authored prose only. */
.ks-entry {
  max-width: 74ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

.ks-entry > * + * {
  margin-top: 18px;
}

.ks-entry h2 {
  margin-top: 34px;
}

.ks-entry h3,
.ks-entry h4 {
  margin-top: 26px;
}

.ks-entry ul,
.ks-entry ol {
  padding-left: 22px;
}

.ks-entry ul {
  list-style: disc;
}

.ks-entry ol {
  list-style: decimal;
}

.ks-entry li {
  margin-bottom: 8px;
}

.ks-entry a {
  color: var(--k-cyan-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ks-entry a:hover {
  color: var(--ink);
}

.ks-entry img,
.ks-entry figure {
  border-radius: var(--r);
}

.ks-entry blockquote {
  border-left: 3px solid var(--line-2);
  padding-left: 18px;
  color: var(--ink-2);
}

.ks-entry code,
.ks-entry pre {
  font-family: var(--ff-mono);
  font-size: .92em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ks-entry code {
  padding: 2px 6px;
}

.ks-entry pre {
  padding: 14px 16px;
  overflow-x: auto;
}

.ks-entry table {
  width: 100%;
  font-size: 13.5px;
}

/* ---------- pagination ----------------------------------------------------
   Used by index.php for archives and search. */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink-2);
}

.nav-links .page-numbers:hover {
  border-color: var(--line-2);
  color: var(--ink);
}

.nav-links .page-numbers.current {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  font-weight: 600;
}

/* ---------- footer menu ---------------------------------------------------
   Optional, only rendered when a Footer Menu is assigned. */
.ftr-menu {
  margin-top: 26px;
}

.ftr-menu .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ftr-menu .chips li a {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 550;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: 99px;
}

.ftr-menu .chips li a:hover {
  color: var(--ink);
  border-color: var(--line-2);
}

/* ---------- custom logo ----------------------------------------------------
   When a custom logo is set, the brand lockup renders through
   wp_get_attachment_image(), which emits width and height attributes. The
   header rule already pins width:auto, but the footer rule sets only height —
   so the width attribute acts as a presentational hint and the logo stretches
   to the column width (350px instead of 62px at 1440). Restoring width:auto
   gives back the intrinsic ratio, matching the static site exactly. */
.hdr .brand img,
.ftr .fbrand img {
  width: auto;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Elementor

   Elementor injects through the_content() into .elementor-page-content.
   The theme's global reset would collapse widgets, so flow is restored inside
   Elementor's canvas only. Unedited SPA routes never hit this container.
   -------------------------------------------------------------------------- */
.elementor-page-content {
	min-height: 40vh;
}

.elementor p,
.elementor ul,
.elementor ol,
.elementor blockquote,
.elementor table,
.elementor figure,
.elementor pre {
	margin: 0 0 1.1em;
}

.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
	margin: 0 0 0.6em;
}

.elementor ul,
.elementor ol {
	padding-left: 1.4em;
}

.elementor ul {
	list-style: disc;
}

.elementor ol {
	list-style: decimal;
}

.elementor a {
	color: var(--k-cyan-deep, #0a7ea4);
}

.elementor img {
	height: auto;
}

.elementor button:not(.elementor-button) {
	font: inherit;
}

/* WordPress menu fallback when app.js is not loaded (Elementor pages). */
body.ks-elementor .nav > li > a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 9px 13px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 550;
	white-space: nowrap;
}

body.ks-elementor .nav .sub-menu {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 220px;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0,0,0,.12);
	padding: 8px;
	display: none;
	z-index: 70;
}

body.ks-elementor .nav > li:hover > .sub-menu,
body.ks-elementor .nav > li:focus-within > .sub-menu {
	display: block;
}

body.ks-elementor .nav .sub-menu a {
	display: block;
	padding: 9px 11px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
}

body.ks-elementor .mobnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}