/*
Theme Name: PenScholar Journals
Theme URI: https://penscholarjournals.com
Author: PenScholar Journals
Author URI: https://penscholarjournals.com
Description: WordPress theme for PenScholar Journals — a scholarly publishing platform for the social sciences and humanities. Light-dominant academic identity (warm ivory grounds, academic navy, muted teal accent, restrained antique gold) with Newsreader for scholarly headings and Inter for UI. Journals, issues, articles, people, submissions and peer review are modelled as first-class content types; every journal shows its real editorial stage rather than implying credentials it does not yet hold. All front-end copy is editable from the Customizer and the block editor.
Version: 1.2.2
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: penscholar
Tags: custom-colors, custom-logo, custom-menu, featured-images, translation-ready, one-column, full-width-template, accessibility-ready
*/

/* ================= Reset ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Safety net against horizontal overflow on narrow screens — a single
   unbroken word/label in an unexpected place (a long DOI, an unbreakable
   URL, a grid column that doesn't shrink) would otherwise force the whole
   page wider than the viewport instead of just clipping that one element. */
html, body { overflow-x: hidden; }
body, h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* ================= Design tokens =================
   PenScholar's academic identity: an ivory, paper-like editorial surface
   carries most of the page (~65%), navy ink is spent deliberately on
   institutional weight — header, mastheads, footer, primary actions
   (~25%), a single muted academic teal handles everything interactive
   (~7%), and antique gold appears only as small institutional detail
   (~3%). Every value is contrast-measured against the surface it is
   actually used on; the ratio is noted beside it so a later change can
   be checked against the same bar.
   ================================================================ */
:root {
  /* Ink */
  --navy: #10233F;          /* headings, header, mastheads, primary actions */
  --navy-deep: #09172B;     /* footer and the deepest institutional bands */
  --charcoal: #1E2A38;      /* body text — 13.5:1 on ivory, 14.6:1 on white */
  --muted: #5D6877;         /* secondary text — 5.2:1 on ivory */

  /* Paper */
  --bg: #F7F6F2;            /* warm ivory: the page itself */
  --bg-tint: #EFEDE6;       /* warm band for alternating sections */
  --surface: #FFFFFF;       /* cards and reading surfaces sit above the paper */

  /* Accents */
  --blue: #376D6A;          /* muted academic teal — links, eyebrows: 5.5:1 on ivory */
  --blue-light: #8FB5B1;    /* the same teal, lifted for navy grounds: 7.1:1 */
  --gold: #B18A45;          /* antique gold. Decorative ONLY on light surfaces
                               (2.9:1 — never text there); legible as text on
                               navy (4.9:1). Use sparingly, by design. */

  /* Lines */
  --border: #DDE2E8;        /* quiet dividers between content */
  --border-strong: #7E8A99; /* form-control edges — 3.5:1 on white, meeting
                               WCAG 2.2 non-text contrast for UI boundaries */

  /* On dark grounds */
  --on-navy: #EFEDE6;       /* 13.4:1 on navy, 15.3:1 on deep navy */
  --on-navy-muted: #A9B6C4; /* 7.6:1 on navy */

  --header-h: 68px;

  /* Journal status badges: neutral for the earliest editorial stages,
     warm gold as a journal approaches launch, teal only once it can
     genuinely accept manuscripts or has a live issue. All ≥ 5.3:1. */
  --status-neutral-bg: #EDEBE4;
  --status-neutral-text: #46525F;
  --status-amber-bg: #F4EBDA;
  --status-amber-text: #7A5A1C;
  --status-green-bg: #E3EDEA;
  --status-green-text: #2C5F5B;
  --status-red-bg: #F5E6E2;
  --status-red-text: #8A2B1E;
  --status-slate-bg: #E8EBEF;
  --status-slate-text: #3B4A5C;
  --teal-wash: #EBF1F0;
  --border-accent: #D3E0DE;

  /* Type: one editorial serif for scholarly voice, one UI sans for
     everything operational. Two families, no more. */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing scale — every gap in the theme should come from this ladder
     rather than an arbitrary one-off value. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;

  /* Structure. Radius stays restrained (4–10px) — this is a publisher,
     not an app. Shadow is almost absent: separation comes from paper
     tone, hairlines and space instead. */
  --container-wide: 1280px;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-soft: 0 1px 2px rgba(16, 35, 63, 0.04), 0 2px 8px rgba(16, 35, 63, 0.06);
}

body {
  background: var(--bg);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--navy); font-weight: 500; line-height: 1.12; }

/* ================= Accessibility ================= */
.sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -3rem; background: var(--navy); color: var(--on-navy); padding: 0.75rem 1.25rem; border-radius: var(--radius); z-index: 1000; transition: top 0.15s ease; }
.skip-link:focus { top: 1rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
/* The teal focus ring is legible on paper but would disappear against a
   navy ground, so dark sections get the lifted teal instead. */
.section--navy :focus-visible,
.section--deep :focus-visible,
.site-footer :focus-visible { outline-color: var(--blue-light); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ================= Layout ================= */
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 1.5rem; }
.container-narrow { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }
.container-article { max-width: 46rem; margin: 0 auto; padding: 0 1.5rem; }

.section { padding: clamp(4rem, 7vw, 7rem) 0; }
.section--tint { background: var(--bg-tint); }
/* Teal wash — the accent's own ground. Teal is the identity colour, so it
   needs a surface of its own rather than living only in link and eyebrow
   text; kept pale so it reads as a calm academic band, never a colour block. */
.section--accent { background: var(--teal-wash); }
.section--accent .eyebrow { color: var(--status-green-text); }
.section--accent .surface-card,
.section--accent .resource-directory,
.section--accent .resource-directory li,
.section--accent .cfp-feature,
.section--accent .cfp-empty,
.section--accent .announcement-item,
.section--accent .section-head-row { border-color: var(--border-accent); }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--navy h2, .section--navy h3 { color: var(--on-navy); }
/* Deepest institutional band — reserved for moments that should read as
   the publisher speaking (journal mastheads, closing statements). */
.section--deep { background: var(--navy-deep); color: var(--on-navy); }
.section--deep h2, .section--deep h3 { color: var(--on-navy); }
/* Headings take an explicit colour above, so inheritance alone will not
   carry them on a dark card the way spans and paragraphs do. */
.featured-journal h1, .featured-journal h2,
.featured-journal h3, .featured-journal h4 { color: var(--on-navy); }
.section--deep .eyebrow { color: var(--blue-light); }
.section--deep .section-intro, .section--deep .reading-col { color: var(--on-navy-muted); }

/* Surfaces that sit above the paper. Separation comes from tone and a
   hairline, not from a drop shadow. */
.surface-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.surface-card { position: relative; overflow: hidden; }
.surface-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--blue); opacity: 0; transition: opacity 180ms ease; }
.surface-card:hover::before, .surface-card:focus-within::before { opacity: 1; }
.section--compact { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }

.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.9rem; }
.eyebrow::before { content: ""; flex: none; align-self: flex-start; margin-top: 0.46em; width: 24px; height: 2px; background: currentColor; }
.section--navy .eyebrow,
.featured-journal .eyebrow { color: var(--blue-light); }

/* An eyebrow paired with a status badge reads as one line of metadata.
   The eyebrow is inline-flex so it would otherwise run straight into the
   badge with no gap; this gives the pair a real row with real spacing. */
.eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; margin-bottom: 1.1rem; }
.eyebrow-row .eyebrow,
.eyebrow-row .status-badge { margin-bottom: 0; }

/* ================= Journal status badge =================
   A journal's real editorial-stage status (never fabricated — set per
   journal in wp-admin), shown on the directory and the journal page so
   a visitor never has to guess whether a journal is genuinely open. */
.status-badge { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--status-neutral-bg); color: var(--status-neutral-text); }
/* Journal editorial stage. */
.status-badge--launching-soon,
.status-badge--submissions-opening-soon { background: var(--status-amber-bg); color: var(--status-amber-text); }
.status-badge--accepting-submissions,
.status-badge--current-issue-available,
.status-badge--current { background: var(--status-green-bg); color: var(--status-green-text); }
/* Submission / review workflow states (author + editor dashboards). */
.status-badge--accepted,
.status-badge--converted { background: var(--status-green-bg); color: var(--status-green-text); }
.status-badge--rejected,
.status-badge--withdrawn { background: var(--status-red-bg); color: var(--status-red-text); }
.status-badge--review { background: var(--status-slate-bg); color: var(--status-slate-text); }
.status-badge--warning { background: var(--status-amber-bg); color: var(--status-amber-text); }
/* Cards stack the badge above the title; inline rows (article masthead)
   keep it on the baseline, so the gap is a context rule, not a base one. */
.surface-card .status-badge,
.journal-card .status-badge,
.journal-row .status-badge { margin-bottom: 0.75rem; }

.section-head { max-width: 42rem; margin-bottom: 3rem; }
.section-head-row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; }
h2 { font-size: clamp(1.85rem, 3vw, 2.6rem); letter-spacing: -0.01em; }
.section-intro { margin-top: 1rem; color: var(--muted); max-width: 40rem; }
.section--navy .section-intro { color: var(--on-navy-muted); }

.reading-col { max-width: 68ch; color: var(--charcoal); }
.reading-col p { margin-bottom: 0.9rem; }
.reading-col p:last-child { margin-bottom: 0; }
.section--navy .reading-col { color: var(--on-navy-muted); }

hr.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

/* ================= Text links ================= */
.text-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.25s ease;
  padding-bottom: 1px;
}
.text-link:hover, .text-link:focus-visible { background-size: 100% 1px; }

/* A standalone call to action, not a link inside a sentence, so WCAG 2.2's
   inline exemption does not apply to it — measured at 27px tall on a phone,
   it now carries a real tap target. The border stays on the text itself. */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 44px;
  font-weight: 600; font-size: 0.9rem; color: var(--blue);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
@media (min-width: 1024px) { .link-arrow { min-height: 0; } }
.section--navy .link-arrow { color: var(--on-navy); }
.link-arrow:hover { border-color: currentColor; }
.link-arrow svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ================= Buttons ================= */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.6rem; font-weight: 600; font-size: 0.9rem;
  border-radius: var(--radius); border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}
/* A tasteful lift-and-press animation on every button site-wide. The
   hover lift is the part that's actually visible on a real click: an
   <a class="btn"> navigates away almost immediately on :active, so a
   press effect alone barely has time to render — the hover lift plays
   first (while the pointer is over the button, before the click even
   lands) so the animation is reliably seen, then the quick press-down
   on :active adds the click feedback itself. Both are already covered
   by the sitewide prefers-reduced-motion rule above (which zeroes every
   transition duration for anyone who has asked their OS to reduce
   motion). */
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn:active { transform: scale(0.98); box-shadow: none; }
.btn--primary { background: var(--navy); color: var(--on-navy); }
.btn--primary:hover { background: var(--blue); }
.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--on-navy); }
.btn--on-navy { border-color: rgba(239,237,230,0.55); color: var(--on-navy); }
.btn--on-navy:hover { background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }

/* ================= Header ================= */
.site-header { position: sticky; top: 0; z-index: 500; background: rgba(247, 246, 242, 0.94); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--navy); letter-spacing: -0.01em; }
.brand-mark { flex-shrink: 0; }

.primary-nav { display: none; }
.primary-nav ul { display: flex; gap: 2.25rem; }
.primary-nav a { font-size: 0.9rem; font-weight: 500; color: var(--charcoal); }
.primary-nav a:hover { color: var(--navy); }
.primary-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; background-size: 100% 1px; }

.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); }
.icon-btn:hover { background: var(--bg-tint); }
.icon-btn svg { width: 18px; height: 18px; }

.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.header-actions .btn { display: none; }

#primary-navigation { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--border); padding: 1rem 1.5rem 1.5rem; }
#primary-navigation.is-open { display: block; }
#primary-navigation ul { display: flex; flex-direction: column; gap: 0.25rem; }
#primary-navigation a { display: block; padding: 0.7rem 0; font-size: 1rem; }
#primary-navigation a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.mobile-cta { margin-top: 0.75rem; }

.search-panel { border-bottom: 1px solid var(--border); background: var(--surface); }
.search-panel[hidden] { display: none; }
.search-panel form { display: flex; align-items: center; gap: 0.75rem; max-width: var(--container-wide); margin: 0 auto; padding: 1rem 1.5rem; }
.search-panel input { flex: 1; border: none; background: transparent; font-size: 1.05rem; font-family: var(--font-serif); color: var(--navy); }
.search-panel input::placeholder { color: var(--muted); }
/* The field is deliberately borderless, but removing its outline left a
   keyboard user with no focus indicator at all (WCAG 2.4.7). The ring
   moves to the whole search bar instead of disappearing. */
.search-panel input:focus { outline: none; }
.search-panel form:focus-within { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: var(--radius-sm); }

/* ================= Breadcrumb ================= */
.breadcrumb { padding: 1rem 0 0; font-size: 0.8rem; color: var(--muted); }
.breadcrumb a:hover { color: var(--navy); }
/* Measured at 1.20:1 — the separator between crumbs was effectively
   invisible, so "Home / Peer Review" read as one run of text. */
.breadcrumb span[aria-hidden] { margin: 0 0.5rem; color: var(--muted); }
.breadcrumb [aria-current="page"] { color: var(--charcoal); }

/* ================= Page header (shared by directory / policy pages) ================= */
.page-hero { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(2rem, 3.5vw, 2.75rem); }
.page-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.7rem); max-width: 20ch; }
.page-hero-lede { margin-top: 1rem; font-size: 1.05rem; color: var(--charcoal); max-width: 56ch; }
/* Missing base rule: without this, .page-hero-grid's second child
   (.hero-visual) rendered full-width and stacked below the text on every
   screen size instead of sitting in a compact side column on desktop —
   its internal absolutely-positioned mockup cards then sprawled far
   larger than intended. .page-hero--large already had its own grid rule
   for the listing pages; this is the same treatment for every other
   page-hero (documentation/policy pages, About, Aims & Scope, etc.). */
.page-hero-grid { display: grid; gap: 2.5rem; align-items: center; }

/* ================= Footer =================
   The deepest ink on the site closes the page, with a single hairline of
   antique gold across the top — the one deliberate, institutional use of
   that accent on a full-width element anywhere in the theme. */
.site-footer { background: var(--navy-deep); color: var(--on-navy-muted); border-top: 2px solid var(--gold); }
.footer-top { padding: 4.5rem 0 3rem; display: grid; gap: 3rem; }
.footer-logo { display: inline-flex; align-items: center; gap: 1rem; }
.footer-logo-mark { flex-shrink: 0; }
.footer-logo-text { display: flex; flex-direction: column; gap: 0.35rem; }
.footer-logo-name { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 600; color: var(--on-navy); letter-spacing: -0.01em; line-height: 1; }
.footer-logo-sub { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--blue-light); }
.footer-logo-sub .rule-line { width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
.footer-brand p { margin-top: 1.1rem; max-width: 26rem; font-size: 0.9rem; }
.footer-columns { display: grid; gap: 2rem; grid-template-columns: repeat(2, 1fr); }
/* Grid items default to min-width:auto, so a long unbroken label (e.g.
   "Corrections & Retractions") can force its 1fr column wider than its
   fair share and push the whole footer past the viewport on narrow
   screens — min-width:0 lets the column shrink and its links wrap instead. */
.footer-col { min-width: 0; text-align: center; }
.footer-col h3 { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-navy); margin-bottom: 1rem; }
.footer-col li { margin-bottom: 0.15rem; }
/* Measured at 17px tall — below the 24px WCAG 2.2 minimum, and these are
   stacked list links, not links inside a sentence. */
.footer-col a { display: inline-block; padding: 0.4rem 0.25rem; font-size: 0.9rem; }
.footer-col a:hover { color: var(--on-navy); }
.footer-bottom { border-top: 1px solid rgba(239, 237, 230, 0.14); padding: 1.5rem 0; font-size: 0.8125rem; }

@media (max-width: 639px) {
  .footer-bottom { text-align: center; }
  .footer-top { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* ================= Tablet ================= */
@media (min-width: 640px) {
  .footer-columns { grid-template-columns: repeat(3, 1fr); }
}

/* ================= Desktop ================= */
@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .nav-toggle { display: none; }
  .header-actions .btn { display: inline-flex; }
  .footer-top { grid-template-columns: 1.1fr 2fr; }
  .footer-columns { grid-template-columns: repeat(5, 1fr); }
  .page-hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}