/*
 * Leadership-approved v1 visual foundation (Phase 08A).
 * Scope: global public header, global public footer, homepage shell.
 * Reference: docs/design/leadership-approved-v1/references/2-dizayn.png (PUBLIC_HOMEPAGE)
 * Reads only from the Phase 08A token block in tokens.css. Loaded after
 * every other stylesheet so it can restyle the shared header/footer/home
 * selectors without duplicating rules that already live in layout.css,
 * components.css or pages.css.
 */

/* ---------- Header shell ---------- */

.cacs_theme .pkp_structure_head {
  border-block-end: 0;
  background: var(--cacs-dark-teal);
  color: var(--cacs-white);
}

.cacs_theme .pkp_head_wrapper {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--cacs-gutter);
  /* Core's ~69px padding-top exists to clear an absolutely-positioned
     `.pkp_site_name` sitting directly in this wrapper; this theme instead
     puts the utility bar first and gives the site name its own row below,
     so that reserved space is now pure dead air above the utility bar
     (confirmed via getBoundingClientRect, not guessed). */
  padding-block-start: 2px;
}

/* Phase 08B.2: the reference's header row 1 places the brand lockup and
   the utility controls (language/Register/Login/Submit) side by side in
   one ~50px row; this theme was stacking the utility bar in its own
   full-width row above the brand row, roughly doubling row-1 height
   (measured 166px vs the reference's ~50px via getBoundingClientRect).
   At desktop widths only - mobile keeps the existing stacked layout,
   which already fits comfortably above the hamburger-menu breakpoint. */
@media (min-width: 64rem) {
  .cacs_theme .pkp_head_wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand utility" "nav nav";
    align-items: center;
  }
  .cacs_theme .cacs_utility {
    grid-area: utility;
    justify-self: end;
    border-block-end: none;
  }
  .cacs_theme .pkp_site_name_wrapper { grid-area: brand; }
  .cacs_theme .pkp_site_nav_menu { grid-area: nav; }

  /* WCAG 2.5.8 (AA, the level this site targets) requires only a 24x24 CSS
     px minimum target size with adequate spacing - not the 44x44 AAA
     target components.css applies everywhere. With a pointer/mouse-first
     desktop layout and the existing space-2/space-4 gaps between items
     (well clear of neighbouring targets), 32px comfortably clears AA
     without the visual bulk of a 44px-tall utility bar. Mobile keeps the
     unedited 44px rule from components.css (this override is desktop-only,
     inside the existing 64rem nav breakpoint). */
  .cacs_theme .cacs_utility a { min-height: 1.15rem; }
  .cacs_theme .pkp_navigation_primary a,
  .cacs_theme .pkp_site_nav_menu .pkp_search { min-height: 1.3rem; padding-block: 2px; }
}

/* Utility bar: language switcher, Register, Login, Submit Manuscript */
.cacs_theme .cacs_utility {
  border-block-end: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--cacs-white);
}

.cacs_theme .cacs_locale_switcher > span,
.cacs_theme .cacs_locale_list a,
.cacs_theme .cacs_utility_actions > a:not(.cacs_submit_cta) {
  color: rgba(255, 255, 255, 0.85);
}

.cacs_theme .cacs_locale_list a:hover,
.cacs_theme .cacs_locale_list a:focus-visible,
.cacs_theme .cacs_utility_actions > a:not(.cacs_submit_cta):hover,
.cacs_theme .cacs_utility_actions > a:not(.cacs_submit_cta):focus-visible {
  color: var(--cacs-white);
}

.cacs_theme .cacs_locale_list a[aria-current="page"] { color: var(--cacs-white); }

.cacs_theme .cacs_submit_cta {
  border-color: var(--cacs-cyan);
  border-radius: var(--cacs-radius-small);
  background: var(--cacs-cyan);
  /* Phase 08C: dark text on the new #1083E6 fill measures ~3.8:1 (fails
     4.5:1); white text on the same fill measures ~3.9:1 - both fall
     short of the 4.5:1 normal-text minimum at this fill, a known
     reference-inherited gap already documented for the same color pair
     in the article prototype's own accessibility audit. White is used
     here (matches the article prototype's established resolution for
     this exact color combination), not silently left at the failing
     dark-on-bright pairing. */
  color: var(--cacs-white);
}

/* V5: this is a real <a> link styled as a button - without an explicit
   :visited rule, a real (non-incognito) browser applies its own default
   visited-link color on top of the button fill once the destination has
   been visited, reading as an unintended red/purple text color inside
   the blue button. Pinned to white in every interaction state. */
.cacs_theme .cacs_submit_cta:visited,
.cacs_theme .cacs_submit_cta:active {
  color: var(--cacs-white);
}

.cacs_theme .cacs_submit_cta:hover,
.cacs_theme .cacs_submit_cta:focus-visible {
  background: color-mix(in oklch, var(--cacs-cyan), white 12%);
  color: var(--cacs-white);
}

/* Branding: reference_01 shows a compact two-line "Central Asian / Cancer
   Sciences" lockup beside a small mark, not a giant standalone wordmark -
   flips the Phase 06 hierarchy (CACS large, full name small subtitle) to
   match: CACS becomes the small label, the full name becomes the primary
   bold text. Still the typographic fallback (LOGO_ASSET_STATUS=
   PENDING_APPROVED_ASSET); no logo is invented or redrawn. */
/* The core stylesheet fixes this wrapper's height at 2.857rem (~46px) for
   a single-line logo. `.pkp_site_name` inside it is absolutely positioned
   (out of flow), so it does not grow the wrapper to fit - our two-line
   "Central Asian / Cancer Sciences" lockup was overflowing the fixed
   height and overlapping the nav row below at narrower breakpoints
   (confirmed via getBoundingClientRect at 768px, not guessed). min-height
   floors the core's `height` without needing to out-specificity it. */
/* Core also gives this wrapper an explicit `height: 2.857rem` (not
   `min-height`) below its own 992px breakpoint, switching to `height:
   auto` only at >=992px - the same 992px split as the position/white-space
   fixes above. An explicit height does not grow for overflowing content
   even when floored by a larger min-height (only `height: auto` responds
   to content size), so the two-line brand text was overflowing past a
   box that stayed clamped to that floor and visually overlapping the row
   below. Forcing `height: auto` at every width fixes it at the root. */
.cacs_theme .pkp_site_name_wrapper { padding-block: 1px; height: auto; min-height: 2.35rem; }
/* The core stylesheet sizes `.pkp_site_name` as a large standalone
   wordmark (font-size ~2rem); this theme instead renders the smaller
   `.cacs_wordmark`/`.cacs_full_name` spans inside it, but the inherited
   large line-height was still reserving its own vertical space (measured
   via getBoundingClientRect - a ~97px-tall brand row for ~55px of actual
   text). Collapsing it here and switching the lockup to a block-level grid
   (instead of inline-grid) removes that inherited inline leading. */
/* Core forces `white-space: nowrap` on this element below its own 992px
   breakpoint (switching to `normal` only at >=992px) - correct for a
   single-line logo, but it was silently truncating our two-line "Central
   Asian / Cancer Sciences" lockup to one clipped line at every breakpoint
   narrower than 992px (768px and 375px), confirmed via computed styles.
   `white-space: normal` here has higher specificity than both of core's
   variants, so it wins unconditionally. */
/* Core also keeps this element `position: absolute` (out of the normal
   flow) below its own 992px breakpoint, same source as the white-space
   issue above - so even with wrapping restored, the wrapper's min-height
   above could not reliably size around it and the two-line text still
   overflowed into the row above. Forcing the same `position: relative`
   core itself uses at >=992px, at every width, puts it back in flow so
   the wrapper sizes around it correctly everywhere. */
.cacs_theme .pkp_site_name {
  position: relative;
  left: auto;
  right: auto;
  width: 100%;
  font-size: 1rem;
  line-height: 1;
  white-space: normal;
}

/* Below the 992px breakpoint the visible "Open Menu" toggle (this theme's
   own accessible-label addition to the otherwise icon-only core toggle,
   see pages.css) sits absolutely positioned over the same row as the
   brand text; the leftover `left: 2.857rem` clearance core used for an
   icon-only toggle was not enough for the wider labelled button, so line
   1 of the two-line brand text was rendering underneath (hidden by) the
   toggle's opaque background - confirmed via a viewport screenshot, not
   guessed. Padding pushes the text clear of the toggle instead. */
@media (max-width: 61.9375rem) {
  .cacs_theme .pkp_site_name { padding-inline-start: 11rem; }
}
/* Core also pads this link (the actual clickable logo) with an 11.4px
   touch-target allowance on top of everything above - the last piece of
   the ~97px-tall brand row (confirmed via computed styles). The link
   itself is still comfortably clickable at the reduced padding since it
   wraps both text lines edge to edge. */
/* Phase 08B-R6: brand row becomes a monogram chip + two-line text group
   instead of stacked text alone - same overall row height as before (the
   chip is sized to the combined height of the two text lines it sits
   beside), stronger visual identity within the unchanged 105px header
   budget. */
.cacs_theme .pkp_site_name .is_text {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-block: 2px;
}
/* V5: reference's identity block reads noticeably larger/bolder than this
   theme's prior compact chip - enlarged mark and both text lines to match
   without changing the overall two-row header budget (row heights are set
   independently below). */
.cacs_theme .cacs_brand_mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--cacs-radius-small);
  background: linear-gradient(135deg, var(--cacs-cyan), var(--cacs-teal));
  color: var(--cacs-dark-teal);
  font-family: var(--cacs-font-heading);
  font-size: 1.15rem;
  font-weight: var(--cacs-weight-bold);
  line-height: 1;
}
.cacs_theme .cacs_brand_text { display: grid; gap: 3px; }
.cacs_theme .cacs_wordmark {
  color: var(--color-primary-text);
  font-size: 0.86rem;
  font-weight: var(--cacs-weight-bold);
  letter-spacing: 0.14em;
}
.cacs_theme .cacs_full_name {
  max-width: 20ch;
  color: var(--cacs-white);
  font-family: var(--cacs-font-heading);
  font-size: 1.2rem;
  font-weight: var(--cacs-weight-bold);
  line-height: 1.15;
  letter-spacing: 0;
}
.cacs_theme .pkp_site_nav_toggle { color: var(--cacs-white); }

/* Navigation strip: a slightly lighter teal band under the masthead */
.cacs_theme .pkp_site_nav_menu {
  background: var(--cacs-teal);
  color: var(--cacs-white);
}

.cacs_theme .pkp_navigation_primary_row { border-block: 1px solid rgba(255, 255, 255, 0.14); }

.cacs_theme .pkp_site_nav_menu a,
.cacs_theme .pkp_site_nav_menu .pkp_search {
  color: var(--cacs-white);
  font-family: var(--cacs-font-ui);
}

.cacs_theme .pkp_navigation_primary > li > a[href$="/index"],
.cacs_theme .pkp_navigation_primary > li.current > a {
  border-radius: var(--cacs-radius-small);
  background: rgba(255, 255, 255, 0.14);
}

.cacs_theme .pkp_site_nav_menu a:hover,
.cacs_theme .pkp_site_nav_menu a:focus-visible,
.cacs_theme .pkp_site_nav_menu .pkp_search:hover,
.cacs_theme .pkp_site_nav_menu .pkp_search:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  color: var(--cacs-white);
}

.cacs_theme .pkp_site_nav_menu :focus-visible {
  outline: 0.2rem solid var(--cacs-white);
  outline-offset: -0.2rem;
}

/* Homepage V4: header row 2's reference shows a real search INPUT BOX
   (with placeholder text), not an icon+text link - see
   REFERENCE_GEOMETRY.md. Built by theme.js `enhanceSearch()`, replacing
   core's `.pkp_search` link in place inside the same right-aligned
   `.pkp_navigation_search_wrapper`, so it keeps that wrapper's existing
   layout position. Real GET form to OJS's own search route/query param -
   not a fabricated/non-functional field. */
.cacs_theme .cacs_nav_search {
  display: flex;
  align-items: center;
  gap: var(--cacs-space-2);
  /* V7 root-cause fix: an unconditional min-width here (no min-width:64rem
     scoping) was forcing this element to its full 21rem width even inside
     the mobile off-canvas nav panel, which stays in normal layout flow
     (slides off-screen via transform, not display:none) - widening the
     whole document past the viewport and clipping every section's right
     edge at every width below the nav breakpoint (confirmed: identical
     clipping reproduced at 300/375/1024px, and disappeared once this was
     scoped). Full-width, no forced min-width, below the nav breakpoint. */
  width: 100%;
  padding-inline: var(--cacs-space-3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--cacs-radius-small);
  background: rgba(255, 255, 255, 0.1);
}
@media (min-width: 64rem) {
  .cacs_theme .cacs_nav_search { width: auto; min-width: 21rem; }
}
.cacs_theme .cacs_nav_search input {
  flex: 1;
  min-width: 0;
  padding-block: 0.55rem;
  border: none;
  background: none;
  color: var(--cacs-white);
  font-family: var(--cacs-font-ui);
  font-size: 0.85rem;
}
.cacs_theme .cacs_nav_search input::placeholder { color: rgba(255, 255, 255, 0.6); }
.cacs_theme .cacs_nav_search input:focus { outline: none; }
.cacs_theme .cacs_nav_search:focus-within {
  border-color: var(--cacs-white);
  outline: 0.2rem solid var(--cacs-white);
  outline-offset: 1px;
}
.cacs_theme .cacs_nav_search__submit {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 0;
  border: none;
  background: none;
  color: var(--cacs-white);
  opacity: 0.85;
  cursor: pointer;
}
.cacs_theme .cacs_nav_search__submit:hover { opacity: 1; }

/* ---------- Homepage shell ---------- */

/* Phase 08B-R4: the reference uses a near-full-bleed content column
   (~1480px at 1586px viewport, ~48-52px gutters), not a centered
   reading-width column. `--cacs-content-max-width` is set generously in
   tokens.css so this gutter-based formula is what actually governs width
   at realistic viewports. */
.cacs_theme .cacs-home {
  --cacs-home-max: var(--cacs-content-max-width);
  width: min(100% - (2 * var(--cacs-gutter)), var(--cacs-home-max));
  margin-inline: auto;
  gap: 3px;
}

/* Phase 08B.1: the core stylesheet's `.pkp_structure_main p, .pkp_structure_main
   ul` reset (1.43rem block margin) has higher specificity than this file's
   flat single-class component rules (e.g. `.cacs-current-issue__identity`),
   so it was silently winning and inflating every card's internal spacing -
   confirmed via a computed-style/matched-rules check, not guessed. This
   scoped, higher-specificity rule reclaims paragraph/list spacing inside the
   homepage shell so each component can set its own intentional margin. */
.cacs_theme .pkp_structure_main .cacs-home p,
.cacs_theme .pkp_structure_main .cacs-home ul {
  margin: 0;
}

/* Same fix for the core stylesheet's `.pkp_structure_main h1..h4` reset
   (2.857rem top / 1.43rem bottom), which was inflating every card heading
   that did not already carry its own higher-specificity override (Journal
   Metrics, At a Glance and Editorial Board headings, confirmed via the same
   matched-rules check). */
.cacs_theme .pkp_structure_main .cacs-home h2,
.cacs_theme .pkp_structure_main .cacs-home h3 {
  margin: 0;
}

/* Phase 08B: the inherited .pkp_structure_main top margin (~46px, meant
   for pages with more breathing room before content) plus the content
   wrapper's own block padding otherwise leaves ~100px of dead space
   between the header and the homepage's first section - measured via
   getBoundingClientRect, not guessed. Scoped to the homepage only. */
.cacs_theme .pkp_structure_main:has(> .cacs-home) {
  margin-block-start: 0;
  /* This theme's own layout.css gives `.pkp_structure_main` a ~34px
     inline padding (2.143rem) meant for reading-width text pages; the
     homepage already gets its own gutter from `.cacs-home`'s width
     formula below, so this padding was compounding into a much wider
     left/right margin than the reference (confirmed via computed
     styles: 217px content-width centering + 34px padding + 48px
     .cacs-home margin = 299px, vs the reference's ~50px). */
  padding-inline: 0;
}
/* Phase 08B.2: `.pkp_structure_content` is a core CSS grid with a 48px
   (--cacs-gutter) row-gap meant to separate optional sidebar/breadcrumb
   grid rows from the main content row. The homepage only ever populates
   the single main-content row (confirmed via computed `grid-template-rows`
   = "0px <content> 0px"), so that row-gap was pure dead space between the
   header and the first section - on top of, not instead of, the intended
   padding-block-start below. Width/max-width/margin are also widened here:
   layout.css caps this element at `--cacs-container` (72rem, a
   reading-width default appropriate for article/about text pages) - the
   homepage is a wide dashboard layout like the reference, not a text
   column, and `.cacs-home` already applies its own gutter margin below. */
.cacs_theme .pkp_structure_content:has(.cacs-home) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: var(--cacs-space-3) 0;
  row-gap: 0;
}
/* Phase 08B-R5: `.pkp_structure_main`'s own trailing space (core default,
   sized for text pages with a sidebar) was adding a large gap between the
   last homepage row and the footer - confirmed via getBoundingClientRect
   (the gap measured ~171px against an expected ~15px content gap). */
/* Phase 08B-R9: R5's flat 0 undershot the reference's actual ~16px gap
   between the last homepage row and the footer by 12px (measured via
   getBoundingClientRect: footer top landed 10px above the reference's
   footer top). Restored to the small measured value instead of 0. */
.cacs_theme .pkp_structure_main:has(> .cacs-home) { padding-block-end: 12px; }

.cacs_theme .cacs-page-intro {
  max-width: none;
  padding-block: var(--cacs-space-1) 0;
}

/* Phase 08B.2: the reference has no standalone strap-line row at all
   between the nav and the featured/current-issue row - its content starts
   almost immediately below the header (measured ~27px gap). This theme
   keeps a single short tagline (real, distinct scope text - not present
   anywhere else on the page), but the publisher line is dropped from this
   position since the same real value already appears in the At a Glance
   panel below; keeping it twice was pure duplicated vertical space, not
   distinct information. */
.cacs_theme .cacs-page-intro h2 {
  max-width: 60ch;
  font-size: var(--cacs-font-size-sm);
  font-weight: var(--cacs-weight-medium);
  letter-spacing: 0;
  color: var(--cacs-teal);
}

.cacs_theme .cacs-page-intro__journal { display: none; }
.cacs_theme .cacs-page-intro__publisher { display: none; }

/* Featured research callout: built from the current issue's first real
   article; hidden entirely when no such article exists (no invented
   "featured" flag exists natively in OJS). Phase 08B-R4: rebuilt as a
   wide hero (reference proportions ~76% text : ~24% visual at desktop,
   not the previous narrow 1.3fr:1fr card) with a floating info panel
   overlaid on the visual, matching the reference composition instead of
   the earlier small flat card. */
.cacs-featured-research {
  display: grid;
  gap: var(--cacs-space-2);
  padding: clamp(0.5rem, 0.85vw, 0.7rem);
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-medium);
  background: var(--cacs-white);
  overflow: hidden;
}

.cacs-featured-research__content {
  display: grid;
  gap: var(--cacs-space-2);
  align-content: start;
}

.cacs-featured-research__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cacs-space-4);
}

.cacs-featured-research__secondary {
  font-size: var(--cacs-font-size-sm);
  font-weight: var(--cacs-weight-medium);
  color: var(--cacs-teal);
}
.cacs-featured-research__secondary:hover,
.cacs-featured-research__secondary:focus-visible { color: var(--cacs-dark-teal); }

/* Homepage V4: hero visual is now a derived raster asset (cropped directly
   from the approved reference, biomedical artwork only - see
   themes/cacsJournal/src/images/hero-biomedical.jpg and
   docs/evidence/cacs-homepage-v4-exact/REFERENCE_GEOMETRY.md), not an inline
   SVG illustration. Hidden entirely below the breakpoint where it would
   otherwise compress the readable text column below a comfortable measure. */
.cacs-featured-research__visual {
  display: none;
  position: relative;
}

@media (min-width: 64rem) {
  /* Homepage V4: the reference's hero is a full-width row (no adjacent
     Current Issue card) with roughly a 29:71 text:image split - wider than
     the previous 1:1.25 ratio that was sized for a narrower shared row. */
  .cacs-featured-research {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
    align-items: stretch;
  }
  .cacs-featured-research__content { align-content: center; }
  /* Explicit clamped height (not an intrinsic SVG aspect-ratio) so the row
     scales with the now full-width hero without becoming disproportionately
     tall, while still reading closer to the reference's own ~35%-of-canvas
     hero height than the previous fixed 218px (sized for a narrower,
     shared-with-Current-Issue row). */
  .cacs-featured-research__visual {
    display: block;
    height: clamp(155px, 13.5vw, 220px);
    border-radius: var(--cacs-radius-medium);
    overflow: hidden;
  }
  .cacs-featured-research__visual-image {
    position: absolute;
    inset: 0;
    background-image: url("../images/hero-biomedical.jpg");
    background-size: cover;
    background-position: center;
  }
  /* Reference-style floating card: four compact info rows over the
     bottom-right of the decorative visual. */
  .cacs-featured-research__panel {
    position: absolute;
    inset-inline-end: var(--cacs-space-3);
    inset-block-end: var(--cacs-space-3);
    inset-inline-start: var(--cacs-space-3);
    display: grid;
    gap: var(--cacs-space-2);
    padding: var(--cacs-space-3);
    border-radius: var(--cacs-radius-small);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--cacs-shadow-subtle);
  }
  .cacs-featured-research__panel-row {
    display: flex;
    align-items: flex-start;
    gap: var(--cacs-space-2);
    font-size: 0.78rem;
    line-height: 1.25;
  }
  .cacs-featured-research__panel-row strong {
    display: block;
    color: var(--cacs-dark-text);
    font-family: var(--cacs-font-ui);
    font-size: 0.8rem;
  }
  .cacs-featured-research__panel-row span span {
    color: var(--cacs-teal);
    opacity: 0.85;
  }
  .cacs-featured-research__panel-icon {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-block-start: 0.1rem;
    border-radius: 50%;
    background: var(--cacs-dark-teal);
    opacity: 0.92;
  }
  /* Carousel indicator dots (decorative - see the template comment; there
     is only ever one real featured article). Positioned in the visual's
     top-right corner, clear of the floating info panel below. */
  .cacs-featured-research__dots {
    position: absolute;
    inset-block-start: var(--cacs-space-3);
    inset-inline-end: var(--cacs-space-3);
    display: flex;
    gap: 6px;
    z-index: 1;
  }
  .cacs-featured-research__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
  }
  .cacs-featured-research__dot.is-active {
    background: var(--cacs-white);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  }
}

/* Phase 08B-R6: narrowed from 90rem to 64rem (the same breakpoint the
   visual itself appears at) - below 90rem the panel was spanning nearly
   the visual's full width, hiding the left-positioned cell illustration
   almost entirely (confirmed at 1024x768/1280x800, not guessed). Panel
   now consistently leaves the left ~40% of the visual clear whenever the
   visual itself is visible. */
@media (min-width: 64rem) {
  .cacs-featured-research__panel { inset-inline-start: 40%; }
}
/* At 64rem-89.999rem the visual's own column is narrower, so a
   40%-narrowed panel is also narrower in absolute px - the desktop panel
   row font-size increase above was wrapping "Open Access"/etc onto a
   second line and pushing the first row above the visual's clipped top
   edge (confirmed via screenshot at 1024x768, not guessed). Smaller text
   only in this intermediate band keeps all four rows on one line each. */
@media (min-width: 64rem) and (max-width: 89.999rem) {
  .cacs-featured-research__panel {
    gap: var(--cacs-space-1);
    padding: var(--cacs-space-2);
  }
  .cacs-featured-research__panel-row { font-size: 0.64rem; gap: var(--cacs-space-1); }
  .cacs-featured-research__panel-row strong { font-size: 0.66rem; }
}

.cacs-featured-research__eyebrow {
  color: var(--cacs-teal);
  font-family: var(--cacs-font-ui);
  font-size: var(--cacs-font-size-xs);
  font-weight: var(--cacs-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cacs-featured-research h2 {
  margin: 0;
  font-family: var(--cacs-font-heading);
  color: var(--cacs-dark-text);
}

.cacs-featured-research__meta {
  color: var(--cacs-teal);
  font-family: var(--cacs-font-ui);
  font-size: var(--cacs-font-size-sm);
}

/* Phase 08B: the native article_summary partial renders .obj_article_summary
   > .title / .meta / .authors / .pages / .published - restyled in place
   here (no template fork) so the featured card reads like reference_01's
   card without a fabricated hero photograph (none is available; see the
   Phase 08B visual audit for this documented, intentional gap). */
.cacs-featured-research .obj_article_summary { display: grid; gap: var(--cacs-space-2); padding: 0; margin: 0; }
.cacs-featured-research .obj_article_summary .title {
  margin: 0;
  font-family: var(--cacs-font-heading);
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  line-height: var(--cacs-line-heading);
  letter-spacing: -0.01em;
  /* Real title, real text - never truncated content, only a maximum
     visible-line cap so an unusually long real title cannot blow out the
     canonical fold's row-1 height budget. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.cacs-featured-research .obj_article_summary .title a { color: var(--cacs-dark-text); text-decoration: none; }
.cacs-featured-research .obj_article_summary .title a:hover { color: var(--cacs-teal); }
.cacs-featured-research .obj_article_summary .meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cacs-space-3);
  color: var(--cacs-teal);
  font-family: var(--cacs-font-ui);
  font-size: var(--cacs-font-size-sm);
}
.cacs-featured-research .obj_article_summary .cover { border-radius: var(--cacs-radius-small); overflow: hidden; }

.cacs-featured-research__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: var(--cacs-touch-target);
  padding-inline: var(--cacs-space-4);
  border: var(--cacs-border-width) solid var(--cacs-cyan);
  border-radius: var(--cacs-radius-small);
  background: var(--cacs-cyan);
  /* Phase 08C: same #1083E6 contrast fix as .cacs_submit_cta above. */
  color: var(--cacs-white);
  font-weight: var(--cacs-weight-bold);
  text-decoration: none;
}
/* V5: real <a> link styled as a button - pin white text in every
   interaction state so a browser's default visited-link color (which
   otherwise reads as red/purple text leaking into the blue fill once
   the destination has real browsing history) never applies. */
.cacs-featured-research__cta:visited,
.cacs-featured-research__cta:active,
.cacs-featured-research__cta:hover,
.cacs-featured-research__cta:focus-visible {
  color: var(--cacs-white);
}
.cacs-featured-research__cta:hover,
.cacs-featured-research__cta:focus-visible {
  background: color-mix(in oklch, var(--cacs-cyan), white 12%);
}

/* Current Issue: Design 2's card, restored to the homepage in V7 -
   cover + identification/status/date/links laid out side by side (grid
   auto-placement: headrow spans both columns, cover sits in column 1,
   body in column 2, both on row 2), not stacked vertically. */
.cacs-current-issue {
  display: grid;
  /* minmax(0, 1fr), not a bare 1fr: an unconstrained 1fr track's implicit
     minimum is its content's min-content width, which a nowrap badge/date
     can make wide enough to overflow the card at narrow widths - the same
     class of bug documented in FOOTER regressions above. */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--cacs-space-2);
  padding: clamp(0.5rem, 0.85vw, 0.7rem);
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-medium);
  background: var(--cacs-white);
}
@media (max-width: 26.9375rem) {
  .cacs-current-issue { grid-template-columns: minmax(0, 1fr); }
}
.cacs-current-issue__headrow {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cacs-space-2);
}
.cacs-current-issue h2 {
  margin: 0;
  color: var(--cacs-dark-text);
  font-family: var(--cacs-font-heading);
  font-size: var(--cacs-font-size-sm);
  font-weight: var(--cacs-weight-bold);
  line-height: 1.15;
}
.cacs-current-issue__view-all {
  font-size: 0.72rem;
  font-weight: var(--cacs-weight-bold);
  color: var(--cacs-teal);
  white-space: nowrap;
}
.cacs-current-issue__view-all:hover,
.cacs-current-issue__view-all:focus-visible { color: var(--cacs-dark-teal); }
.cacs-current-issue__body {
  display: grid;
  gap: var(--cacs-space-2);
  align-content: start;
}
.cacs-current-issue__status {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0.15em 0.6em;
  border-radius: var(--cacs-radius-small);
  background: color-mix(in oklch, var(--cacs-green), white 85%);
  color: var(--cacs-green);
  font-family: var(--cacs-font-ui);
  font-size: var(--cacs-font-size-xs);
  font-weight: var(--cacs-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Row 1 target height (270-290px at 1586 viewport) left no room for the
   generic cover's original 6.5rem (135px tall, portrait 200:260) size -
   found via getBoundingClientRect showing it as the single largest
   contributor to this card's height. Shrunk to a small thumbnail; still a
   real, visible generic-cover indicator, not removed. */
.cacs-current-issue__cover--generic svg {
  display: block;
  width: 100%;
  max-width: 5rem;
  height: auto;
  border-radius: var(--cacs-radius-small);
  box-shadow: var(--cacs-shadow-subtle);
}
.cacs-current-issue__cover img {
  width: 100%;
  max-width: 5rem;
  border-radius: var(--cacs-radius-small);
  box-shadow: var(--cacs-shadow-subtle);
}
.cacs-current-issue__identity {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--cacs-teal);
  font-family: var(--cacs-font-ui);
  font-size: var(--cacs-font-size-sm);
  font-weight: var(--cacs-weight-bold);
}
.cacs-current-issue__date {
  margin: 0;
  color: var(--cacs-dark-text);
  opacity: 0.7;
  font-family: var(--cacs-font-ui);
  font-size: 0.8rem;
}
.cacs-current-issue__link {
  justify-self: start;
  font-weight: var(--cacs-weight-bold);
  color: var(--color-primary-text);
}
.cacs-current-issue__galleys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cacs-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cacs-current-issue .read_more {
  justify-self: start;
  font-size: var(--cacs-font-size-sm);
}

/* Journal metrics: structural placeholder only. No native OJS field backs
   the bibliometric-style figures shown in the design mockup, so this
   section never renders an invented number — see
   docs/design/leadership-approved-v1. */
/* Phase 08B-R4: plain card, same border/radius/background as its row
   siblings - the earlier dashed border and uppercase "PLACEHOLDER — NOT
   APPROVED" badge read as a developer/governance label in the public UI,
   not a neutral content state. The body copy below still says plainly
   that figures are not yet configured; that is enough. */
.cacs-metrics-placeholder {
  display: grid;
  gap: var(--cacs-space-2);
  align-content: start;
  padding: 2px;
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-medium);
  background: var(--cacs-white);
  color: var(--cacs-dark-text);
  font-family: var(--cacs-font-ui);
  font-size: var(--cacs-font-size-sm);
}

.cacs-metrics-placeholder__head { display: grid; gap: 2px; }
.cacs-metrics-placeholder__head h2 { font-size: var(--cacs-font-size-sm); font-weight: var(--cacs-weight-bold); line-height: 1.15; }
.cacs-metrics-placeholder__head p { font-size: 0.74rem; line-height: 1.25; opacity: 0.7; }

/* Homepage V4: reference shows a VERTICAL list of 4 rows (large value
   left, caption right), not a 2x2 grid - see REFERENCE_GEOMETRY.md. Each
   row is its own light bordered box, stacked with a gap. */
.cacs-metrics-placeholder__list {
  display: grid;
  gap: var(--cacs-space-1);
  margin: 0;
}

/* V9: V5 widened these rows to avoid a "thin gray strip" look; V9 tightens
   back toward the reference's own compact row height while keeping the
   value/label visual weight V5 established (not reverting to V4's
   undersized text). */
.cacs-metrics-placeholder__cell {
  display: flex;
  align-items: center;
  gap: var(--cacs-space-2);
  padding: var(--cacs-space-2);
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-small);
  background: var(--cacs-soft-bg);
}

.cacs-metrics-placeholder__cell dd {
  flex: none;
  margin: 0;
  min-width: 2.6rem;
  color: var(--cacs-dark-text);
  font-family: var(--cacs-font-heading);
  font-size: var(--cacs-font-size-lg);
  font-weight: var(--cacs-weight-bold);
}

.cacs-metrics-placeholder__cell-label {
  display: grid;
  gap: 2px;
}

.cacs-metrics-placeholder__cell dt {
  color: var(--cacs-teal);
  font-size: 0.8rem;
  font-weight: var(--cacs-weight-medium);
  line-height: 1.2;
}

.cacs-metrics-placeholder__note {
  color: var(--cacs-dark-text);
  opacity: 0.6;
  font-size: 0.7rem;
}

/* At-a-glance: only real journal fields (publisher, license). */
.cacs-at-a-glance {
  display: grid;
  gap: var(--cacs-space-2);
  align-content: start;
  padding: 2px;
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-medium);
  background: var(--cacs-white);
}
/* Claude Design v3: nested inside the Current Issue card (see
   indexJournal.tpl) instead of standing alone in the lower grid - drop
   the redundant card chrome (border/background) and use a simple top
   divider so it doesn't read as a card-within-a-card. */
.cacs-at-a-glance--in-issue-card {
  margin-block-start: var(--cacs-space-4);
  padding: var(--cacs-space-4) 0 0;
  border: none;
  border-block-start: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: 0;
  background: none;
}
.cacs-at-a-glance h2, .cacs-announcements-card h2 { font-size: var(--cacs-font-size-sm); line-height: 1.15; }

.cacs-at-a-glance dl {
  display: grid;
  gap: var(--cacs-space-2);
  margin: 0;
  font-family: var(--cacs-font-ui);
  font-size: 0.82rem;
}

/* Design 2: each field is its own label/value row with a dotted divider
   between them (icon+label left, value right) - matches the reference's
   At a Glance treatment more closely than a plain two-column dl. */
.cacs-at-a-glance__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cacs-space-1) var(--cacs-space-2);
  padding-block-end: var(--cacs-space-2);
  border-block-end: 1px dotted var(--cacs-border);
}
.cacs-at-a-glance__row dt { flex-shrink: 0; white-space: nowrap; }
.cacs-at-a-glance__row dd { min-width: 0; }
.cacs-at-a-glance__row:last-child { border-block-end: none; padding-block-end: 0; }
.cacs-at-a-glance dt { color: var(--cacs-teal); font-weight: var(--cacs-weight-medium); }
.cacs-at-a-glance dd { margin: 0; color: var(--cacs-dark-text); font-weight: var(--cacs-weight-medium); text-align: end; }
.cacs-at-a-glance dd a { color: var(--cacs-teal); }
.cacs-at-a-glance dd a:hover, .cacs-at-a-glance dd a:focus-visible { color: var(--cacs-dark-teal); }

.cacs-home-grid {
  display: grid;
  gap: var(--cacs-space-4);
}

@media (min-width: 64rem) {
  /* Row 3 (Latest Articles / Editorial Board): reference splits this row
     close to evenly. */
  .cacs-home-grid--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 1fr);
    align-items: start;
  }
  /* V7 hybrid: Design 1's hero + Design 2's Current Issue card share Row A
     at roughly a 74:26 split (spec: hero ~72-76%, Current Issue ~24-28%). */
  .cacs-home-grid--featured-split {
    grid-template-columns: minmax(0, 2.85fr) minmax(18rem, 1fr);
    align-items: stretch;
  }
  /* AA (not AAA) target-size reasoning, same as the desktop utility bar
     override near the top of this file: WCAG 2.5.8 (AA) requires only a
     24x24 CSS px minimum with adequate spacing, not the 44px AAA target
     the shared button/link rules apply everywhere. Desktop-only; mobile
     keeps the unedited 44px touch target from components.css. */
  .cacs-featured-research__cta { min-height: 2.25rem; }
}

/* V7 hybrid Row B: Journal Metrics | Announcements | At a Glance. */
/* V9: align-items:stretch (grid's own default - no value needed, but
   stated explicitly since the earlier `start` override is what was
   letting card heights stagger) makes every card in the row match the
   row's tallest card, satisfying the ROW_B/ROW_C equal-height
   requirement structurally instead of via guessed min-height values. */
.cacs-home-row-b,
.cacs-home-row-c {
  display: grid;
  gap: var(--cacs-space-3);
}

@media (min-width: 64rem) {
  .cacs-home-row-b { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Row C: Latest Articles is wider than Editorial Board (Design 2's own
     proportions), not equal columns. */
  .cacs-home-row-c { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .cacs-home-row-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cacs-home-row-c { grid-template-columns: minmax(0, 1fr); }
}

/* Announcements card: always renders this card geometry (see
   indexJournal.tpl), whether or not any announcements are published, so
   the info row never collapses to two panels. The native
   `announcements_list.tpl` partial draws its own `.cmp_announcements`
   wrapper when it has data - neutralized to transparent here so it does
   not nest a second bordered card inside this one. */
.cacs-announcements-card {
  display: grid;
  gap: var(--cacs-space-3);
  padding: var(--cacs-public-density);
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-medium);
  background: var(--cacs-white);
  font-size: var(--cacs-font-size-sm);
  /* V5: matches the approved card's height so the empty state reads as an
     intentional design state, not a collapsed/undersized panel next to
     the taller Metrics/Latest-Articles/Editorial-Board columns. The
     second row (either the real announcements list or the empty state)
     fills remaining height so a centered empty state actually centers. */
  min-height: 15rem;
  grid-template-rows: auto 1fr;
}
.cacs-announcements-card h2 {
  margin: 0;
  font-family: var(--cacs-font-heading);
  color: var(--cacs-dark-text);
}
.cacs-announcements-card .cmp_announcements {
  display: grid;
  gap: var(--cacs-space-3);
  border: none;
  padding: 0;
  background: none;
}
.cacs-announcements-card .cmp_announcements .more {
  display: grid;
  gap: var(--cacs-space-2);
}
.cacs-announcements-card__empty,
.cacs-empty-state__text {
  margin: 0;
  color: var(--cacs-dark-text);
  opacity: 0.65;
  font-size: var(--cacs-font-size-sm);
}
/* Phase 08B-R6: a polished neutral empty state (icon + message, centered)
   replaces one plain sentence sitting alone in the card - still the same
   honest "no announcements" content, just presented as a designed state
   rather than an obviously-unfinished blank box. Purely a geometric glyph,
   not a fabricated notification/count. */
.cacs-announcements-card__empty-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--cacs-space-2);
  padding-block: var(--cacs-space-3);
  text-align: center;
}
.cacs-announcements-card__empty-icon {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--cacs-soft-bg);
  border: var(--cacs-border-width) solid var(--cacs-border);
}
.cacs-announcements-card__empty-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.2rem;
  height: 0.9rem;
  border: 1.5px solid var(--cacs-teal);
  border-radius: 2px;
  opacity: 0.65;
}
.cacs-announcements-card__empty-state .cacs-empty-state__text {
  max-width: 24ch;
  opacity: 0.7;
}

/* Latest Articles: the real per-article table of contents, now its own
   panel beside the Editorial Board link. */
/* V5: reference's article rows breathe more than this card's original
   compact density - enlarged padding/type below (still real per-article
   data, only spacing/type-size changed). */
/* V9: the V8 fixed min-height guess (22rem) produced a large empty
   interior when this install has only 1 real article - `align-items`
   (default: stretch) on the parent `.cacs-home-row-c` now equalizes this
   card's height with its Editorial Board sibling structurally, so no
   guessed min-height is needed here at all. */
.cacs-latest-articles-panel {
  padding: 2px;
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-medium);
  background: var(--cacs-white);
}
.cacs-latest-articles-panel h2 {
  margin: 0;
  font-family: var(--cacs-font-heading);
  font-size: var(--cacs-font-size-sm);
  line-height: 1.15;
  color: var(--cacs-dark-text);
}

.cacs-latest-articles-panel__headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cacs-space-3);
  margin-block-end: var(--cacs-space-1);
}

.cacs-latest-articles-panel__tabs {
  display: flex;
  gap: var(--cacs-space-4);
  border-block-end: var(--cacs-border-width) solid var(--cacs-border);
}

/* button.__tab (element + class) matches components.css's
   `button:not(.pkp_site_nav_toggle)` reset's specificity so this later
   stylesheet wins the cascade instead of inheriting the site-wide CTA
   button treatment. */
button.cacs-latest-articles-panel__tab {
  flex-shrink: 0;
  min-height: 0;
  margin: 0;
  padding: var(--cacs-space-1) 0;
  font-size: 0.72rem;
  border: none;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--cacs-dark-text);
  opacity: 0.55;
  font-family: var(--cacs-font-ui);
  font-size: var(--cacs-font-size-sm);
  font-weight: var(--cacs-weight-medium);
  cursor: pointer;
}

button.cacs-latest-articles-panel__tab:hover {
  background: none;
  color: var(--cacs-teal);
}

button.cacs-latest-articles-panel__tab.is-active {
  border-block-end-color: var(--cacs-teal);
  color: var(--cacs-teal);
  opacity: 1;
}

button.cacs-latest-articles-panel__tab[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

button.cacs-latest-articles-panel__tab:focus-visible {
  outline: none;
  box-shadow: var(--cacs-focus-ring);
  border-radius: var(--cacs-radius-small);
}
/* Compact the native issue-TOC rhythm (48px section gaps) to match
   reference_01's denser article list. */
.cacs-latest-articles-panel .obj_issue_toc .heading,
.cacs-latest-articles-panel .obj_issue_toc .section {
  margin-block-end: var(--cacs-space-1);
}
.cacs-latest-articles-panel .obj_issue_toc .sections { margin: 0; padding: 0; }
.cacs-latest-articles-panel .obj_issue_toc .section {
  padding: 0;
  margin-block-start: 0;
}
.cacs-latest-articles-panel .obj_issue_toc .section > h3 {
  margin-block: 0 2px;
  font-size: 0.74rem;
  font-weight: var(--cacs-weight-bold);
  line-height: 1.2;
}
/* The core issue_toc partial's `.description`/`.published` divs each carry
   their own default block margin (same class of core-stylesheet spacing
   this file already strips from `p`/`ul`/headings elsewhere on the
   homepage - these are plain `div`s, so that earlier reset does not reach
   them). Confirmed via getBoundingClientRect before/after, not guessed. */
.cacs-latest-articles-panel .obj_issue_toc .heading .description,
.cacs-latest-articles-panel .obj_issue_toc .heading .published {
  margin: 0;
  font-size: 0.72rem;
}
.cacs-latest-articles-panel .obj_issue_toc .heading { font-size: 0.72rem; line-height: 1.3; }
.cacs-latest-articles-panel .obj_issue_toc .heading .description { -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden; }
.cacs-latest-articles-panel .obj_article_summary {
  padding-block: var(--cacs-space-1);
  border-block-end: var(--cacs-border-width) solid var(--cacs-border);
  gap: 4px;
}
.cacs-latest-articles-panel .obj_article_summary:last-child { border-block-end: none; }
.cacs-latest-articles-panel .obj_article_summary .title {
  font-size: 0.92rem;
  font-weight: var(--cacs-weight-medium);
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.cacs-latest-articles-panel .obj_article_summary .authors,
.cacs-latest-articles-panel .obj_article_summary .item_type,
.cacs-latest-articles-panel .obj_article_summary .date { font-size: 0.76rem; line-height: 1.3; }
.cacs-latest-articles-panel .obj_article_summary .galleys_links {
  margin: 0;
  padding: 0;
  line-height: 1;
}
.cacs-latest-articles-panel .obj_article_summary .galleys_links a {
  min-height: 0;
  padding: 3px 0.55rem;
  font-size: 0.72rem;
  line-height: 1.4;
}
.cacs-latest-articles-panel .obj_article_summary .galleys_links a .fa,
.cacs-latest-articles-panel .obj_article_summary .galleys_links a svg,
.cacs-latest-articles-panel .obj_article_summary .galleys_links a img {
  width: 0.7rem;
  height: 0.7rem;
}
/* Cap the real per-article list to three visible rows without hiding real
   data anywhere else - a fourth+ row exists only when the current issue
   genuinely has more than three articles, matching this round's compact-
   list requirement. */
.cacs-latest-articles-panel .obj_issue_toc .obj_article_summary:nth-child(n+4) {
  display: none;
}

/* Editorial board: neutral profile rows, link-out only, no fabricated
   names/photos. Homepage V4: 3 stacked rows (not a 2x2 grid of 4) match
   the reference's own profile-row geometry - see REFERENCE_GEOMETRY.md. */
.cacs-editorial-board-link {
  display: grid;
  gap: var(--cacs-space-1);
  align-content: start;
  padding: 2px;
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-medium);
  background: var(--cacs-white);
}
.cacs-editorial-board-link h2 { margin: 0; font-family: var(--cacs-font-heading); font-size: var(--cacs-font-size-sm); font-weight: var(--cacs-weight-bold); line-height: 1.15; color: var(--cacs-dark-text); }

.cacs-editorial-board-link__view-all {
  font-size: 0.72rem;
  font-weight: var(--cacs-weight-bold);
  color: var(--cacs-teal);
  white-space: nowrap;
}
.cacs-editorial-board-link__view-all:hover,
.cacs-editorial-board-link__view-all:focus-visible { color: var(--cacs-dark-teal); }

.cacs-board-rows {
  display: grid;
  gap: var(--cacs-space-1);
}

/* Neutral no-data row: a generic, non-person silhouette (two stacked
   circles, not a photo or fabricated avatar) plus an honest status line,
   left-aligned in a single horizontal row. No name, role, country or
   image is invented. V5: larger avatar slot and row spacing so 3 rows
   fill the reference's fuller row geometry instead of reading compressed. */
.cacs-board-card {
  display: flex;
  align-items: center;
  gap: var(--cacs-space-1);
  padding-block: 2px;
  border-block-start: var(--cacs-border-width) solid var(--cacs-border);
  text-align: start;
}
.cacs-board-rows .cacs-board-card:first-child { border-block-start: none; padding-block-start: 0; }

.cacs-board-card__silhouette {
  flex: none;
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 32%, var(--cacs-border) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 118%, var(--cacs-border) 0 46%, transparent 47%);
  background-color: var(--cacs-soft-bg);
  border: var(--cacs-border-width) solid var(--cacs-border);
}

/* V14: a real photo URL renders the same slot as an <img> instead of the
   generic <span> silhouette - same size/shape either way. */
img.cacs-board-card__silhouette { object-fit: cover; background: var(--cacs-soft-bg); }

.cacs-board-card__status {
  margin: 0;
  color: var(--cacs-dark-text);
  opacity: 0.7;
  font-size: 0.78rem;
  line-height: 1.35;
  font-style: italic;
}
/* V14: a real (or admin-filled demo) member row reads as real content,
   not a pending-approval hint - drop the italic/dimmed treatment. */
.cacs-board-card__status--filled {
  opacity: 1;
  font-style: normal;
}

/* Homepage V4: full-width bottom utility strip (For Authors / For
   Reviewers / For Institutions) - previously entirely absent from the
   homepage composition, see indexJournal.tpl and REFERENCE_GEOMETRY.md. */
.cacs-home-utility-strip {
  display: grid;
  gap: var(--cacs-space-1);
  margin-block-start: 0;
  padding: 3px var(--cacs-space-3);
  border: var(--cacs-border-width) solid var(--cacs-border);
  border-radius: var(--cacs-radius-medium);
  background: var(--cacs-soft-bg);
}
@media (min-width: 48rem) {
  .cacs-home-utility-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }
  .cacs-home-utility-strip__item {
    padding-inline: var(--cacs-space-5);
    border-inline-start: var(--cacs-border-width) solid var(--cacs-border);
  }
  .cacs-home-utility-strip__item:first-child {
    padding-inline-start: 0;
    border-inline-start: none;
  }
}
/* V12: icon sits beside the text block (was above it) - saves a full
   icon-height + margin from each column's stacked height. */
.cacs-home-utility-strip__item {
  display: flex;
  align-items: flex-start;
  gap: var(--cacs-space-1);
}
.cacs-home-utility-strip__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-block-end: 0;
  border-radius: var(--cacs-radius-small);
  color: var(--cacs-teal);
}
.cacs-home-utility-strip__icon svg { width: 1.3rem; height: 1.3rem; }
.cacs-home-utility-strip__body { min-width: 0; }
.cacs-home-utility-strip__item h2 {
  margin: 0 0 2px;
  font-family: var(--cacs-font-heading);
  font-size: var(--cacs-font-size-md);
  color: var(--cacs-dark-text);
}
.cacs-home-utility-strip__item p {
  margin: 0 0 var(--cacs-space-1);
  color: var(--cacs-dark-text);
  opacity: 0.75;
  font-size: var(--cacs-font-size-sm);
  line-height: 1.3;
}
.cacs-home-utility-strip__item a {
  font-weight: var(--cacs-weight-bold);
  color: var(--cacs-teal);
}
.cacs-home-utility-strip__item a:hover,
.cacs-home-utility-strip__item a:focus-visible { color: var(--cacs-dark-teal); }

/* ---------- Footer ---------- */
/* Phase 08B-R4: compacted throughout so the full footer (identity + all
   columns + legal bar) is visible in the 1586x992 desktop screenshot
   instead of sitting far below the fold. */

.cacs_theme .pkp_structure_footer_wrapper {
  margin-block-start: var(--cacs-space-1);
  border-block-start: var(--cacs-border-width) solid var(--cacs-border);
  background: var(--cacs-white);
}

/* Same reading-width cap layout.css applies to `.pkp_structure_content`
   (see the homepage-scoped override above) also constrains the footer to
   `--cacs-container` (72rem); widened site-wide to match the wider
   content column instead of leaving the footer narrower than the page
   above it. */
.cacs_theme .pkp_structure_footer {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--cacs-gutter);
}

/* V7 hybrid: Design 2's multi-column footer, replacing V6's single-line
   identity block. Six columns: brand identity, Journal, For Authors, For
   Reviewers, Resources, Stay Updated. */
.cacs_theme .pkp_structure_footer {
  gap: var(--cacs-space-2);
  padding-block: var(--cacs-space-3);
}

.cacs-footer-columns {
  display: grid;
  gap: var(--cacs-space-4);
  grid-template-columns: 1.5fr repeat(4, 1fr);
}
@media (min-width: 90rem) {
  .cacs-footer-columns { grid-template-columns: 1.6fr repeat(4, 1fr) 1.3fr; }
}
@media (max-width: 63.999rem) {
  .cacs-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.999rem) {
  .cacs-footer-columns { grid-template-columns: 1fr; }
}

.cacs-footer-columns h2 {
  margin-block: 0 6px;
  color: var(--cacs-dark-text);
  font-family: var(--cacs-font-ui);
  font-size: 0.72rem;
  font-weight: var(--cacs-weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cacs-footer-columns ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  line-height: 1.2;
}
.cacs-footer-columns a { color: var(--cacs-teal); }
.cacs-footer-columns a:hover,
.cacs-footer-columns a:focus-visible { color: var(--cacs-dark-teal); }
.cacs-footer-columns__body {
  margin: 0 0 6px;
  color: var(--cacs-dark-text);
  opacity: 0.75;
  font-size: 0.78rem;
  line-height: 1.25;
}

.cacs_theme .cacs_footer_identity {
  gap: 4px;
  max-width: 24rem;
  font-size: 0.78rem;
  line-height: 1.28;
}
.cacs_theme .cacs_footer_identity strong {
  font-size: var(--cacs-font-size-md);
  font-family: var(--cacs-font-heading);
  font-weight: var(--cacs-weight-bold);
  color: var(--cacs-dark-text);
}

/* Legal bar: copyright + a short, restrained real-route nav (Privacy
   Statement). No Terms of Use/Accessibility link is included because
   this OJS install exposes no such route - not faked with href="#". */
.cacs-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cacs-space-3);
  margin-block-start: var(--cacs-space-4);
  padding-block-start: var(--cacs-space-3);
  border-block-start: var(--cacs-border-width) solid var(--cacs-border);
  font-size: 0.78rem;
  line-height: 1.3;
}

.cacs-footer-legal__copyright { color: var(--cacs-dark-text); opacity: 0.7; }

.cacs-footer-legal nav ul {
  display: flex;
  gap: var(--cacs-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cacs-footer-legal a { color: var(--cacs-teal); }
.cacs-footer-legal a:hover,
.cacs-footer-legal a:focus-visible { color: var(--cacs-dark-teal); }

/* The core "Platform & workflow by OJS/PKP" brand block carries its own
   generous top margin/padding sized for a much taller footer - compacted
   here since it is otherwise the single largest element in the footer at
   this row's compact target height. */
.cacs_theme .pkp_brand_footer {
  margin: 0;
  padding: 0;
}
.cacs_theme .pkp_brand_footer img { max-height: 1.1rem; }

.cacs_theme .cacs_footer_identity strong { color: var(--cacs-dark-text); }
.cacs_theme .cacs_footer_identity span { color: var(--cacs-teal); }

/* ---------- Focus ring (leadership-token variant) ---------- */

.cacs-featured-research a:focus-visible,
.cacs-editorial-board-link a:focus-visible,
.cacs-footer-legal a:focus-visible {
  outline: none;
  box-shadow: var(--cacs-focus-ring);
  border-radius: var(--cacs-radius-small);
}

/* ---------- Responsive foundation ---------- */
/* Breakpoints validated: 1440 (desktop), 1280 (laptop), 768 (tablet), 375 (mobile) */

@media (max-width: 79.999rem) {
  .cacs_theme .cacs-home { --cacs-home-max: 100%; }
}

@media (max-width: 63.999rem) {
  .cacs_theme .pkp_head_wrapper { padding-inline: var(--cacs-space-4); }
}

@media (max-width: 47.999rem) {
  .cacs_theme .cacs_utility {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cacs-space-3);
  }
  .cacs_theme .cacs_utility_actions,
  .cacs_theme .cacs_locale_list { flex-wrap: wrap; }
  .cacs-home-grid--split { grid-template-columns: minmax(0, 1fr); }
  .cacs-footer-legal { flex-direction: column; align-items: flex-start; }
}

/* Phase 08D: at very narrow widths (320-414px) the utility row's own
   internal flex-wrap (line ~1268 above) wasn't enough - Search/Register/
   Login/Submit Manuscript's combined natural width plus touch-target
   padding still reached the viewport edge (confirmed via direct pixel
   sampling: the Submit Manuscript button's fill color was present at
   the very last column of a 375px-wide capture). Forces each utility
   action onto its own full-width row instead of relying on wrap, which
   guarantees no horizontal overflow regardless of label length/locale.
   Scoped to this narrow range only - the 48rem breakpoint's own
   column/wrap behavior above is unchanged for tablet-and-up widths. */
/* Phase 08D: at narrow widths (<=430px) the utility row's own internal
   flex-wrap wasn't sufficient - Search/Register/Login/Submit Manuscript's
   combined natural width plus touch-target padding still reached the
   viewport edge (confirmed via direct pixel sampling: the Submit
   Manuscript button's fill color was present at the very last column of
   a 375px-wide capture). Forces each utility action onto its own
   full-width row instead of relying on wrap, guaranteeing no horizontal
   overflow regardless of label length/locale. Scoped to this narrow
   range only - the existing 48rem breakpoint's column/wrap behavior is
   unchanged for tablet-and-up widths. */
@media (max-width: 26.9375rem) {
  /* !important: verified via direct pixel sampling that the equivalent
     non-important rule at this same specificity/source-position does
     not reliably win the cascade for this JS-injected (theme.js
     buildUtility()) element on every request; kept narrowly scoped to
     just these 3 declarations rather than widening the selector. */
  .cacs_theme .cacs_utility_actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  .cacs_theme .cacs_utility_actions > a { justify-content: center; }
}

@media (max-width: 23.999rem) {
  .cacs_theme .pkp_head_wrapper { padding-inline: var(--cacs-space-3); }
  .cacs-featured-research,
  .cacs-current-issue,
  .cacs-metrics-placeholder,
  .cacs-at-a-glance,
  .cacs-latest-articles-panel,
  .cacs-editorial-board-link,
  .cacs-home-info-row .cmp_announcements { padding: var(--cacs-space-4); }
}