/*
Theme Name: AOI Research Memos
Theme URI: https://github.com/aan2734-eng/ai-opportunity-inventory
Author: AI Innovation and Law Program, University of Texas School of Law
Author URI: https://law.utexas.edu
Description: Block theme for the AI Opportunity Inventory research memos. Publishes student-authored memos alongside the raw Raw Opportunity Bank submission they examine, with the bank fields held as locked post meta populated by the inventory app. Built on the Industry design system: steel-blue on a light technical ground, Barlow Condensed over Barlow, blueprint frames.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
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: aoi-memos
Tags: block-theme, full-site-editing, editor-style, two-columns, custom-colors, custom-menu, news
*/

/* ---------------------------------------------------------------------------
   Industry design tokens.
   Source of truth for the look. theme.json mirrors the palette, type and
   spacing so the block editor's pickers offer the same values; retune both
   together. Every rule below reads from these variables — no raw hexes.
   --------------------------------------------------------------------------- */

:root {
  --color-bg: #fafafb;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --color-hairline: color-mix(in srgb, #1d1f20 10%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* Registration mark used by .blueprint. Drawn, not a font glyph, so it
     stays 1px at every zoom. */
  --bp-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%231d1f20' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
}

/* --- base ---------------------------------------------------------------- */

body { text-wrap: pretty; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

::selection { background: var(--color-accent-200); }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Accent at paragraph size fails contrast on this ground; the deep step
   carries small accent text instead. */
.wp-block-post-content a,
.aoi-prose a { color: var(--color-accent-700); }
.wp-block-post-content a:hover,
.aoi-prose a:hover { color: var(--color-accent-800); }

/* --- blueprint frame ----------------------------------------------------- */
/* Cards and figures are line drawings: square corners, hairline border, four
   "+" registration marks. Marks are drawn on the pseudo-elements so block
   markup needs no extra children. */

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}

.blueprint::before,
.blueprint::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  height: 11px;
  background-image: var(--bp-mark), var(--bp-mark);
  background-position: left center, right center;
  background-repeat: no-repeat;
  background-size: 11px 11px;
  pointer-events: none;
}

.blueprint::before { top: -6px; }
.blueprint::after { bottom: -6px; }

/* --- tags ---------------------------------------------------------------- */

.aoi-tags .wp-block-post-terms__separator { display: none; }

.aoi-tags a,
.aoi-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  margin-right: var(--space-2);
  border-radius: calc(var(--radius-md) * 0.75);
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  text-decoration: none;
}

.aoi-tags a:hover { background: var(--color-accent-200); }

.aoi-tag-outline {
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-neutral-800);
}

.aoi-tag-neutral {
  background: var(--color-neutral-200);
  color: var(--color-neutral-900);
}

/* --- kickers and meta lines ---------------------------------------------- */

.aoi-kicker {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0;
}

.aoi-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  font-size: 13px;
  color: var(--color-neutral-700);
}

.aoi-byline > * { margin: 0; }

.aoi-byline .aoi-label { color: var(--color-neutral-500); }

/* --- spec sheet (locked bank fields) ------------------------------------- */

.aoi-spec {
  padding: var(--space-6) var(--space-4);
}

.aoi-spec__head {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 var(--space-1);
}

.aoi-spec__note {
  font-size: 12px;
  color: var(--color-neutral-600);
  margin: 0 0 var(--space-4);
}

.aoi-spec__row {
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-2);
  margin-bottom: var(--space-3);
}

.aoi-spec__row > * { margin: 0; }

.aoi-spec__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin-bottom: 3px !important;
}

.aoi-spec__value {
  font-size: 14px;
  line-height: 1.4;
}

/* A field with no value in the payload collapses rather than leaving a
   labelled blank. */
.aoi-spec__row:has(.aoi-spec__value:empty) { display: none; }

@media (min-width: 782px) {
  .aoi-spec--sticky {
    position: sticky;
    top: var(--space-6);
  }
}

/* --- memo body ----------------------------------------------------------- */

.aoi-prose { font-size: 16px; line-height: 1.6; }

.aoi-prose > h2 {
  font-size: 26px;
  line-height: 1.15;
  margin: var(--space-8) 0 var(--space-3);
}

.aoi-prose > h2:first-child { margin-top: 0; }

.aoi-prose > p { margin: 0 0 var(--space-3); color: var(--color-neutral-900); }

.aoi-disclosure {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-700);
  padding: var(--space-4);
}

.aoi-disclosure p { margin: 0; }

/* --- ledger index -------------------------------------------------------- */

.aoi-ledger { border-top: 1px solid var(--color-text); }

.aoi-ledger__head,
.aoi-ledger__row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 170px 150px 100px;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-3) 0;
}

.aoi-ledger__head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  border-bottom: 1px solid var(--color-divider);
  padding-top: 0;
}

.aoi-ledger__head > * { margin: 0; }

.aoi-ledger__row { border-bottom: 1px solid var(--color-hairline); }

.aoi-ledger__row > * { margin: 0; }

.aoi-ledger__no {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  color: var(--color-accent-700);
}

.aoi-ledger__title a {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  line-height: 1.2;
  color: var(--color-text);
  text-decoration: none;
}

.aoi-ledger__title a:hover { color: var(--color-accent-700); }

.aoi-ledger__entry {
  font-size: 12px;
  color: var(--color-neutral-600);
  margin-top: 2px !important;
}

.aoi-ledger__cell { font-size: 13px; }

.aoi-ledger__cell--quiet { color: var(--color-neutral-700); }

@media (max-width: 880px) {
  .aoi-ledger__head { display: none; }
  .aoi-ledger__row {
    grid-template-columns: 44px minmax(0, 1fr);
    row-gap: var(--space-1);
  }
  .aoi-ledger__row > .aoi-ledger__cell { grid-column: 2; }
}

/* Grid cell wrappers WP emits inside a ledger row. */
.aoi-ledger__titlecell > * { margin: 0; }

.aoi-ledger__title { margin: 0 !important; }

.aoi-ledger .wp-block-post-author-name,
.aoi-ledger .wp-block-post-date,
.aoi-ledger .wp-block-post-terms { font-size: 13px; }

/* --- filter row ---------------------------------------------------------- */

.aoi-filter { align-items: center; }

.aoi-filter__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: 0;
}

.aoi-filter .wp-block-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.aoi-filter .wp-block-categories li a {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  padding: 3px 10px;
  border: 1px solid var(--color-divider);
  border-radius: calc(var(--radius-md) * 0.75);
  color: var(--color-neutral-800);
  text-decoration: none;
}

.aoi-filter .wp-block-categories li a:hover {
  background: var(--color-accent-100);
  border-color: var(--color-accent-400);
  color: var(--color-accent-800);
}

.aoi-filter .wp-block-categories li.current-cat a {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.aoi-filter__search { margin-left: auto; }

.aoi-filter__search .wp-block-search__input {
  font-family: var(--font-body);
  font-size: 14px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-neutral-100);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

.aoi-filter__search .wp-block-search__button { border-radius: 0; }

/* --- stats plate --------------------------------------------------------- */

.aoi-stats {
  padding: var(--space-4);
  gap: var(--space-2);
  text-align: center;
}

.aoi-stat__figure {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 30px;
  line-height: 1;
  margin: 0;
}

.aoi-stat__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  margin: var(--space-1) 0 0;
}

/* --- spec sheet link ----------------------------------------------------- */

.aoi-spec__link { width: 100%; }

.aoi-spec__link .wp-block-button__link {
  width: 100%;
  justify-content: center;
  border-radius: 0;
}

.aoi-spec__link.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
}

.aoi-spec__link.is-style-outline .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text);
}

/* --- header / footer ----------------------------------------------------- */

.aoi-nav {
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-3) var(--space-4);
}

.aoi-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-accent);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 11px;
  line-height: 1;
  color: var(--color-accent);
  margin: 0;
}

.aoi-nav__brand { flex: none; }

.aoi-nav .wp-block-site-title { white-space: nowrap; }

.aoi-nav .wp-block-site-title a {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 18px;
  text-decoration: none;
  color: var(--color-text);
}

.aoi-footer {
  border-top: 1px solid var(--color-divider);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-neutral-700);
  padding: var(--space-8) var(--space-4);
}

.aoi-footer__head {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}

.aoi-footer p { margin: 0 0 var(--space-1); }

/* --- data table ---------------------------------------------------------- */

.wp-block-table table { border-collapse: collapse; width: 100%; }

.wp-block-table th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

.wp-block-table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-hairline);
}

/* --- pagination ---------------------------------------------------------- */

.wp-block-query-pagination {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  letter-spacing: 0.04em;
}

.wp-block-query-pagination a { text-decoration: none; color: var(--color-accent-700); }
.wp-block-query-pagination a:hover { color: var(--color-accent-800); }
.wp-block-query-pagination .current { color: var(--color-text); }

/* --- images -------------------------------------------------------------- */
/* Photographs are duotoned into the accent and framed, never rounded. */

.wp-block-image img,
.wp-block-post-featured-image img {
  border-radius: 0;
  display: block;
}

.wp-block-post-featured-image { border: 1px solid var(--color-divider); }