/* ============================================================
   EJLE block theme — supplemental styles
   Only the bespoke chrome that theme.json tokens can't express.
   Body text is Inter (set in theme.json); headings are Cormorant Garamond.
   Two-font system: Cormorant Garamond (headings) + Inter (body and chrome).
   ============================================================ */

/* Header chrome sits flush — kill the default block gap / root padding that
   otherwise shows as canvas-coloured strips above and below the masthead. */
.ejle-site-header { margin-block: 0; }
.ejle-site-header > * { margin-block: 0; }
.ejle-topbar,
.ejle-masthead,
.ejle-nav { margin-block: 0; }

/* Top bar */
.ejle-topbar { background: var(--wp--preset--color--royal-ink); }
.ejle-topbar .wp-block-group { padding-top: 6px; padding-bottom: 6px; }
.ejle-topbar, .ejle-topbar a, .ejle-topbar p { color: rgba(255,255,255,0.5); font-size: 11px; letter-spacing: 0.04em; }
.ejle-topbar a:hover { color: rgba(255,255,255,0.85); }

/* Masthead */
.ejle-masthead {
  background: #052e82;
  background: radial-gradient(circle, rgba(5,46,130,1) 51%, rgba(0,31,94,1) 100%);
}
.ejle-masthead .ejle-logo svg { display: block; width: 300px; height: auto; max-width: 100%; }
/* Keep the Submit button hard-right and vertically centred, regardless of the
   header row's block layout or whether the secondary links row is present. */
.ejle-masthead > .wp-block-group { justify-content: space-between; flex-wrap: nowrap; align-items: center; }
.ejle-masthead .ejle-submit { margin-left: auto; }
.ejle-masthead .ejle-links a { color: rgba(255,255,255,0.6); font-size: 11px; letter-spacing: 0.03em; }
.ejle-masthead .ejle-links a:hover { color: #fff; text-decoration: none; }

/* Submit button */
.ejle-submit a, a.ejle-submit {
  background: #c9a227 !important; color: #fff !important;
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em; padding: 9px 20px;
  border-radius: 2px; text-decoration: none;
}
.ejle-submit a:hover, a.ejle-submit:hover { background: #ab8a1f !important; }

/* Primary navigation — white bar, Cormorant caps, hairline gold rule on hover/active.
   Spacing lives in the flex gap (not link padding) so the first item sits flush
   with the constrained content column, aligned under the masthead wordmark. */
.ejle-nav {
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--rule);
  box-shadow: 0 1px 3px rgba(5,45,130,0.05);
}
.ejle-nav .wp-block-navigation__container { gap: 2rem; }
.ejle-nav .wp-block-navigation-item__content {
  position: relative;
  font-family: var(--wp--preset--font-family--cormorant);
  text-transform: uppercase; letter-spacing: 0.15em; text-decoration: none;
  color: var(--wp--preset--color--muted); font-size: 13px; font-weight: 500;
  padding: 9px 0;
}
/* Hairline gold rule — drawn in from the left on hover, full-width when active */
.ejle-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: var(--wp--preset--color--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.22s ease;
}
/* Direct-child (>) scoping is deliberate: hovering a parent item (e.g. About)
   must not cascade the gold rule onto links inside its open dropdown. A submenu
   item only underlines when it is itself hovered or is the current page. */
.ejle-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.ejle-nav .current-menu-item > .wp-block-navigation-item__content,
.ejle-nav .wp-block-navigation-item__content[aria-current],
.ejle-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--royal);
  text-decoration: none;
}
.ejle-nav .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.ejle-nav .current-menu-item > .wp-block-navigation-item__content::after,
.ejle-nav .wp-block-navigation-item__content[aria-current]::after,
.ejle-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .ejle-nav .wp-block-navigation-item__content::after { transition: none; }
}

/* Tighten the gap between the nav bar and the top of page content.
   Each template sets padding-top:2.5rem inline on its <main> group; this
   override (here so it wins regardless of Site Editor changes) halves it. */
main.wp-block-group { padding-top: 1.25rem !important; }

/* Announcement banner */
.ejle-banner {
  display: flex; align-items: center; gap: 1rem;
  background: var(--wp--preset--color--gold-light);
  border: 0.5px solid #e7dcc4; border-left: 3px solid var(--wp--preset--color--gold);
  border-radius: 4px; padding: 13px 18px;
}
.ejle-banner .badge {
  font-family: var(--wp--preset--font-family--cormorant); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--gold-dark); border: 0.5px solid var(--wp--preset--color--gold);
  padding: 5px 12px; border-radius: 2px; white-space: nowrap; flex-shrink: 0;
}
.ejle-banner .body { flex: 1; }
.ejle-banner .title { font-family: var(--wp--preset--font-family--cormorant); font-size: 17px; font-weight: 500; line-height: 1.3; margin: 0 0 3px; }
.ejle-banner .title a { color: var(--wp--preset--color--ink); }
.ejle-banner .meta { font-size: 11.5px; color: var(--wp--preset--color--muted); margin: 0; }
.ejle-banner .go { font-size: 12px; font-weight: 500; color: var(--wp--preset--color--royal); white-space: nowrap; flex-shrink: 0; }

/* Journal facts strip */
.ejle-facts { display: flex; flex-wrap: wrap; background: var(--wp--preset--color--surface); border: 0.5px solid var(--wp--preset--color--rule); border-radius: 4px; overflow: hidden; }
.ejle-facts .cell { flex: 1 1 0; min-width: 120px; padding: 12px 16px; border-right: 0.5px solid var(--wp--preset--color--rule); }
.ejle-facts .cell:last-child { border-right: none; }
.ejle-facts .l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--wp--preset--color--muted); margin-bottom: 3px; }
.ejle-facts .v { font-size: 13px; font-weight: 500; color: var(--wp--preset--color--ink); }
.ejle-facts .v.gold { color: var(--wp--preset--color--gold-dark); }

/* Issue header */
.ejle-issue-header { display: flex; gap: 2rem; align-items: flex-start; }
.ejle-issue-cover {
  width: 104px; flex-shrink: 0; aspect-ratio: 3/4; border-radius: 3px;
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, var(--wp--preset--color--royal) 0%, var(--wp--preset--color--royal-deep) 80%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; gap: 6px;
  box-shadow: 0 3px 14px rgba(5,45,130,0.2);
}
.ejle-issue-cover .abbr { font-family: var(--wp--preset--font-family--cormorant); font-style: italic; font-size: 21px; font-weight: 500; color: #fff; letter-spacing: 0.06em; }
.ejle-issue-cover .rule { width: 46px; height: 1px; background: var(--wp--preset--color--gold); }
.ejle-issue-cover .vol { font-size: 9px; color: rgba(255,255,255,0.7); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; line-height: 1.6; }
/* When an issue has a real cover image, let it fill the plate (covering the
   gradient + abbr fallback) instead of overflowing at its intrinsic size. */
.ejle-issue-cover .ejle-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* All-issues archive — each volume is a spine beside an in-line row of issue cards.
   The cover plate (.ejle-issue-cover) is reused from the issue header above. */
.ejle-all-issues { margin: 0; }
.ejle-volume-group {
  display: grid; grid-template-columns: 140px 1fr; gap: 36px;
  padding: 30px 0; border-top: 1px solid var(--wp--preset--color--rule);
}
.ejle-volume-group:last-of-type { border-bottom: 1px solid var(--wp--preset--color--rule); }
.ejle-volume-spine { padding-top: 4px; }
.ejle-volume-spine .v-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gold); font-weight: 700; }
.ejle-volume-spine .v-num { font-family: var(--wp--preset--font-family--cormorant); font-size: 42px; line-height: 1; color: var(--wp--preset--color--royal-deep); margin: 4px 0 0; font-weight: 600; }
.ejle-volume-spine .v-year { font-size: 13px; color: var(--wp--preset--color--muted); margin-top: 7px; }

.ejle-issue-grid { display: flex; flex-wrap: wrap; gap: 28px; }
.ejle-issue-card { display: flex; flex-direction: column; width: 112px; }
.ejle-issue-card .ejle-issue-cover { width: 112px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.ejle-issue-card:hover .ejle-issue-cover { transform: translateY(-3px); box-shadow: 0 12px 22px -14px rgba(5,45,130,0.55); }
.ejle-issue-card-title { display: block; margin-top: 11px; font-family: var(--wp--preset--font-family--cormorant); font-size: 15px; line-height: 1.3; color: var(--wp--preset--color--royal-deep); text-decoration: none; font-weight: 600; }
.ejle-issue-card:hover .ejle-issue-card-title { color: var(--wp--preset--color--gold); }
.card-meta { margin-top: 3px; font-size: 12px; color: var(--wp--preset--color--muted); }

/* Article rows */
.ejle-article { padding: 1.4rem 0; border-bottom: 1px solid var(--wp--preset--color--rule); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
.ejle-article .a-title { font-family: var(--wp--preset--font-family--cormorant); font-size: 22px; font-style: normal; font-weight: 600; line-height: 1.35; margin: 0 0 5px; }
.ejle-article .a-title a { color: var(--wp--preset--color--ink); }
.ejle-article:hover .a-title a { color: var(--wp--preset--color--royal-mid); }
.ejle-article .a-auth { font-size: 12.5px; color: var(--wp--preset--color--muted); margin: 0 0 8px; }
.ejle-tag { font-size: 10px; color: var(--wp--preset--color--royal); background: var(--wp--preset--color--royal-light); padding: 2px 8px; border-radius: 2px; }
.ejle-oa { font-size: 10px; color: #0f6e56; background: #e1f5ee; padding: 2px 8px; border-radius: 2px; font-weight: 500; }
.ejle-pdf-btn { font-size: 11px; font-weight: 500; color: var(--wp--preset--color--royal); background: var(--wp--preset--color--royal-light); border: 0.5px solid var(--wp--preset--color--royal); border-radius: 2px; padding: 5px 12px; }
.ejle-doi { font-size: 10px; color: var(--wp--preset--color--muted); }

/* Footer tweaks */
.ejle-footer { background: var(--wp--preset--color--royal-ink); }
.ejle-footer, .ejle-footer p, .ejle-footer a { color: rgba(255,255,255,0.55); }
.ejle-footer a:hover { color: #fff; }
.ejle-footer .ejle-fcol-title { color: rgba(255,255,255,0.4); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

@media (max-width: 768px) {
  .ejle-article { grid-template-columns: 1fr; }
  .ejle-banner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .ejle-issue-header { flex-direction: column; }
  .ejle-volume-group { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .ejle-volume-spine { display: flex; align-items: baseline; gap: 12px; padding-top: 0; }
  .ejle-volume-spine .v-num { font-size: 28px; }
  .ejle-volume-spine .v-year { margin: 0 0 0 auto; }
  /* Issues render two-up and fill the row (covers scale to the column). */
  .ejle-issue-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .ejle-issue-card { width: auto; }
  .ejle-issue-card .ejle-issue-cover { width: 100%; }
}

/* ----------------------------------------------------------------------------
 * Mobile sizing, gutters and reflow (v0.1.15)
 * -------------------------------------------------------------------------- */

/* The CPT page templates set only vertical padding, so on narrow screens their
   content ran edge-to-edge. Guarantee a horizontal gutter that scales to phone
   widths; harmless on desktop (content is max-width-capped and centred). */
.ejle-article-single,
.ejle-issue-single,
.ejle-issues-archive,
.ejle-volume-archive,
.ejle-author-archive,
.ejle-news {
  padding-left: clamp(1.1rem, 5vw, 2rem);
  padding-right: clamp(1.1rem, 5vw, 2rem);
}
/* The single article/issue templates may be the plugin's own block templates or
   a Site-Editor (DB) override, whose <main> has no .ejle-* class — so the rule
   above can't reach them. Scope the same gutter by BODY class instead, which WP
   always sets per CPT page no matter which template renders. Idempotent on the
   archive (same property/value), so no double padding. */
.single-ijel_article main.wp-block-group,
.single-ijel_issue main.wp-block-group,
.post-type-archive-ijel_issue main.wp-block-group,
.tax-ijel_volume main.wp-block-group,
.tax-ijel_author main.wp-block-group {
  padding-left: clamp(1.1rem, 5vw, 2rem);
  padding-right: clamp(1.1rem, 5vw, 2rem);
}

/* Mobile menu overlay — core renders it large and in the body font. Bring it
   into the nav's Cormorant-caps register at a readable size and give it a
   gutter. Self-gates on .is-menu-open, so it only applies when the menu opens
   (the topbar nav never opens an overlay, so this is safe unscoped). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-inline: clamp(1.2rem, 6vw, 2rem); padding-top: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--cormorant);
  text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 17px; font-weight: 500; color: var(--wp--preset--color--ink);
  padding: 6px 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }

@media (max-width: 600px) {
  /* Topbar: drop the affiliation line; keep Contact / Privacy. */
  .ejle-topbar p { display: none; }

  /* Masthead: shrink the logo and let the row wrap so the Submit button is
     never crushed (no more mid-word break); trim height; hide tertiary links. */
  .ejle-masthead > .wp-block-group { flex-wrap: wrap; row-gap: 0.6rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .ejle-masthead .ejle-logo svg { width: min(230px, 60vw); }
  .ejle-masthead .ejle-links { display: none; }
  .ejle-submit a, a.ejle-submit { white-space: nowrap; font-size: 11px; padding: 8px 14px; }

  /* Announcement card: stack the badge above full-width text. */
  body .ijel-announcement { flex-direction: column; align-items: stretch; gap: 10px; }
  body .ijel-announce-body { display: flex; flex-direction: column; row-gap: 5px; }
  body .ijel-announce-eyebrow { align-self: start; }
  body .ijel-announce-more { align-self: start; }
}

/* ----------------------------------------------------------------------------
 * Single article + issue pages — EJLE skin over the Citeable blocks.
 * Scoped to the page wrappers so it never leaks into other contexts.
 * -------------------------------------------------------------------------- */
.ejle-article-single { max-width: 760px; }
.ejle-article-single .wp-block-post-title {
	font-family: var(--wp--preset--font-family--cormorant);
	line-height: 1.18; margin-bottom: 0.4rem;
}
.ejle-article-single .ijel-authors-block { font-size: 15px; font-weight: 400; color: var(--wp--preset--color--ink); }
.ejle-article-single .ijel-authors-block a { font-weight: 400; }
.ejle-article-single .ijel-article-meta { font-size: 12.5px; color: var(--wp--preset--color--muted); }
.ejle-article-single .ijel-article-meta a { color: var(--wp--preset--color--royal-mid); }
.ejle-article-single .ijel-meta-sep { color: var(--wp--preset--color--gold); padding: 0 0.15rem; }
.ejle-article-single .ijel-citation-block {
	background: var(--wp--preset--color--canvas);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 8px; padding: 1rem 1.2rem;
}

.ejle-issue-single .wp-block-post-title { font-family: var(--wp--preset--font-family--cormorant); line-height: 1.2; }
.ejle-issue-single .ejle-issue-header .wp-block-post-featured-image img { border-radius: 4px; }
.ejle-issue-single h2.wp-block-heading {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--wp--preset--color--gold); font-weight: 700;
}

/* Brand the gold "wide" separator used to break up these pages. */
.ejle-article-single .wp-block-separator.is-style-wide,
.ejle-issue-single .wp-block-separator.is-style-wide {
	border: none; height: 2px; opacity: 1;
	background: var(--wp--preset--color--gold);
	max-width: 56px; margin-inline: 0;
}

/* ============================================================
   Citeable plugin output — EJLE presentation overrides (v0.1.8)
   The plugin's own CSS references the old `eb-garamond` preset (renamed to
   `cormorant`, so it falls back to Georgia) and sets article titles italic.
   Map those to Cormorant + upright here; body-prefixed so they win over the
   plugin stylesheet regardless of load order. Plugin stays untouched/portable.
   ============================================================ */
body .ijel-card-title,
body .ejle-issue-title,
body .ejle-article .a-title {
  font-family: var(--wp--preset--font-family--cormorant, Georgia, "Times New Roman", serif);
}
body .wp-block-post-template li:has(.ijel-loop-authors) .wp-block-post-title {
  font-family: var(--wp--preset--font-family--cormorant, Georgia, "Times New Roman", serif);
  font-style: normal; font-weight: 600;
}
/* Article-card / list titles: upright, not italic */
body .ijel-card-title,
body .ejle-article .a-title {
  font-style: normal; font-weight: 600;
}
body .ejle-article .a-title { font-size: 22px; }
/* Single-article author names: a notch smaller and lighter */
body .ejle-article-single .ijel-authors { font-size: 0.95rem; font-weight: 400; }
body .ejle-article-single .ijel-authors a { font-weight: 400; }

/* ------------------------------------------------------------
   Announcement block (plugin's .ijel-announcement) — EJLE gold-outline.
   Plugin markup is unchanged; CSS grid sets the label beside the body.
   ------------------------------------------------------------ */
body .ijel-announcement {
  display: flex; align-items: center; gap: 16px;
  background: #fffdf8;
  border: 1px solid #ddc88f;
  border-left: 3px solid var(--wp--preset--color--gold, #b89a5a);
  border-radius: 6px;
  padding: 13px 18px; margin: 1.25rem 0; font-size: 1em;
}
body .ijel-announce-body {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px;
}
body .ijel-announce-more {
  flex: none; white-space: nowrap;
  font-size: 12px; font-weight: 600; text-decoration: none;
  color: var(--wp--preset--color--gold-dark, #7a6428);
}
body .ijel-announce-more:hover { text-decoration: underline; }
body .ijel-announce-eyebrow {
  grid-column: 1; grid-row: 1; align-self: center; display: inline-block; margin: 0;
  font-family: var(--wp--preset--font-family--cormorant, Georgia, "Times New Roman", serif);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wp--preset--color--gold-dark, #7a6428);
  background: #f3ead2; border: 1px solid #e2d09a; border-radius: 2px;
  padding: 5px 12px; white-space: nowrap;
}
body .ijel-announce-title {
  grid-column: 2; margin: 0;
  font-family: var(--wp--preset--font-family--cormorant, Georgia, "Times New Roman", serif);
  font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--ink, #1a1a1a);
}
body .ijel-announce-excerpt { grid-column: 2; margin: 0.1rem 0 0; font-size: 12.5px; color: var(--wp--preset--color--muted, #5f6b78); }
body .ijel-announce-date    { grid-column: 2; margin: 0.05rem 0 0; font-size: 11.5px; opacity: 1; color: var(--wp--preset--color--muted, #5f6b78); }