/* ============================================================
   Cri-One shared UI  —  /crione-ui.css
   ------------------------------------------------------------
   One stylesheet so the search page and the "special" pages
   (Reading Room, IP Ownership, My Library) share one look:
   the store's Open Sans type, a clean neutral base, and a very
   small amount of blue accent on links, the active nav item,
   and primary buttons.

   It is linked AFTER each page's own <style>, so it re-skins the
   shared look (font, small colour, nav, buttons, inputs) using
   equal-specificity rules — the page-specific reading layout
   (widths, figures, spacing) is left untouched.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

:root{
  --cri-accent:#1979c3;        /* the one accent colour, from the search page */
  --cri-accent-dark:#136bb0;
  --cri-ink:#1a1a1a;
  --cri-dim:#6d6d6d;
  --cri-line:#e2e2e2;
  --accent:var(--cri-accent);  /* crione-shop's accent follows the one knob above */
}

/* — Base type: the serif reading pages adopt the store's Open Sans — */
body{
  font-family:'Open Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--cri-ink);
  background:#fff;
}
h1,h2,h3,h4,h5{
  font-family:'Open Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* — Links: the small amount of colour — */
a{ color:var(--cri-accent); }
a:hover{ color:var(--cri-accent-dark); }

/* — Shared top nav — */
.topnav{ font-family:'Open Sans',system-ui,sans-serif; }
.topnav a{ color:var(--cri-dim); }
.topnav a:hover{ color:var(--cri-accent); }
.topnav a[aria-current]{ color:var(--cri-accent); text-decoration:none; font-weight:700; }

/* — Primary buttons → filled blue, matching the search's Search button — */
.buy,
.search button,
form.signin button,
.jump button{
  font-family:'Open Sans',system-ui,sans-serif;
  background:var(--cri-accent);
  color:#fff;
  border:1px solid var(--cri-accent);
  border-radius:3px;
}
.buy:hover,
.search button:hover,
form.signin button:hover,
.jump button:hover{
  background:var(--cri-accent-dark);
  border-color:var(--cri-accent-dark);
  color:#fff;
}

/* — Text inputs: match the search's clean field — */
.search input,
form.signin input[type=email],
.jump input{
  font-family:'Open Sans',system-ui,sans-serif;
  border:1px solid #c2c2c2;
  border-radius:3px;
  color:var(--cri-ink);
}
.search input:focus,
form.signin input[type=email]:focus{
  outline:none;
  border-color:var(--cri-accent);
  box-shadow:0 0 0 2px rgba(25,121,195,.18);
}

/* — Small neutral chrome to match the search's light borders — */
.topnav,
.lock,
.notice,
.acct,
form.signin,
hr,
nav{
  border-color:var(--cri-line);
}
.certlink,
.jump,
small,
.fig figcaption{ color:var(--cri-dim); }