/*
 * =============================================================================
 * Janeway Custom Style Override — custom_static/css/styles.css
 *
 * This file is bind-mounted into the Janeway container at:
 *   /janeway/src/themes/OLH/static/OLH/css/custom_override.css
 *
 * Django's `collectstatic` picks it up and Nginx serves it from /static/.
 *
 * To apply these styles, add the following tag to your journal's custom
 * header HTML in the Janeway Manager UI
 *   (Manager → Journal Settings → Styling → Custom Header/Footer):
 *
 *   <link rel="stylesheet"
 *         href="/static/OLH/css/custom_override.css">
 *
 * Alternatively for the Material theme the path will be:
 *   /static/material/css/custom_override.css
 * =============================================================================
 */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/OLH/fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;   /* covers the full wght axis range */
  font-style: normal;
  font-display: swap;
}
/* ── Design tokens ── */
:root {
  --bg:           #FAFAF8;
  --bg-alt:       #F2EEE7;
  --surface:      #FFFFFF;
  --border:       #DDD6C8;
  --text:         #1C1917;
  --text-muted:   #6B6059;
  --primary:      #1B3A6B;
  --accent:       #007EA8;
  --accent-light: #00B4D8;
  --cta:          #C96A00;
  --hero-tint:    #EBF0F8;

  /* Legacy Janeway override aliases — keeps existing theme variables in sync */
  --jw-brand-primary:   #1B3A6B;
  --jw-brand-secondary: #007EA8;
  --jw-brand-accent:    #C96A00;
  --jw-bg:              #FAFAF8;
  --jw-surface:         #FFFFFF;
  --jw-text:            #1C1917;
  --jw-text-muted:      #6B6059;
  --jw-font-sans:       'Space Grotesk', system-ui, sans-serif;
  --jw-font-serif:      'Georgia', 'Times New Roman', serif;
  --jw-radius:          8px;
  --jw-shadow:          0 2px 12px rgba(27,58,107,0.06);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

/* ── Base body ── */
body {
  font-family:      'Space Grotesk', system-ui, sans-serif;
  background:       var(--bg);
  color:            var(--text);
  line-height:      1.6;
}

/* ── Global links ── */
a {
  color:           var(--accent);
  text-decoration: none;
}
a:hover {
  color:           var(--primary);
  text-decoration: underline;
}

/* ── Nav web component — transparent in layout ── */
cis-nav { display: contents; }

/* ── Navigation ── */
nav,
nav.navbar,
.navbar {
  position:         sticky;
  top:              0;
  z-index:          100;
  background:       var(--hero-tint) !important;
  border-bottom:    1px solid transparent;
  padding:          0 48px;
  display:          flex;
  align-items:      center;
  height:           68px;
  box-shadow:       none;
  transition:       background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
nav.scrolled {
  background:       var(--surface) !important;
  border-bottom-color: var(--border);
  box-shadow:       0 1px 6px rgba(27,58,107,0.06);
}

/* Wordmark */
.wordmark,
.navbar-brand,
.navbar-brand:hover {
  display:         flex;
  align-items:     center;
  gap:             12px;
  flex-shrink:     0;
  text-decoration: none;
  color:           var(--primary) !important;
  font-weight:     700;
  letter-spacing:  -0.01em;
}
.wm-abbr  { font-size: 2rem; font-weight: 700; color: var(--primary); letter-spacing: -0.03em; line-height: 1; }
.wm-sep   { width: 1.5px; height: 30px; background: #C5D0E0; flex-shrink: 0; }
.wm-name  { font-size: 0.68rem; font-weight: 400; color: #5A6E8A; line-height: 1.4; }

/* Nav links */
.nav-links {
  display:     flex;
  gap:         28px;
  list-style:  none;
  font-size:   0.875rem;
  font-weight: 500;
  margin-left: 40px;
}
.nav-links a,
.nav-link,
.navbar-nav .nav-link {
  color:           var(--primary) !important;
  text-decoration: none;
  opacity:         0.8;
}
.nav-links a:hover,
.nav-link:hover,
.navbar-nav .nav-link:hover {
  opacity: 1;
  color:   var(--primary) !important;
}
.nav-links a[aria-current="page"] {
  opacity:        1;
  border-bottom:  2px solid var(--accent);
  padding-bottom: 2px;
}

/* Hamburger toggle */
.nav-toggle {
  display:        none;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        8px;
  margin-left:    auto;
  flex-direction: column;
  gap:            5px;
}
.nav-toggle span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--primary);
  border-radius: 2px;
}

/* ── Buttons ── */
.btn-primary {
  background:      var(--cta);
  color:           #fff;
  padding:         13px 28px;
  border-radius:   7px;
  font-weight:     600;
  font-size:       0.95rem;
  text-decoration: none;
  font-family:     inherit;
  border:          none;
}
.btn-primary:hover {
  background:  #b35e00;
  color:       #fff;
  filter:      none;
}

.btn-secondary {
  background:      var(--surface);
  color:           var(--primary);
  padding:         12px 28px;
  border-radius:   7px;
  font-weight:     500;
  font-size:       0.95rem;
  text-decoration: none;
  border:          1.5px solid #C5D0E0;
  font-family:     inherit;
}
.btn-secondary:hover { border-color: var(--primary); }

.btn-success,
.btn-download {
  background-color: var(--cta);
  border-color:     var(--cta);
  color:            #fff;
}
.btn-success:hover,
.btn-download:hover { background: #b35e00; filter: none; }

/* ── Page / journal header ── */
.page-header,
.hero,
.jumbotron,
#journal-header {
  position:   relative;
  background: linear-gradient(
    180deg,
    var(--hero-tint) 0%,
    var(--hero-tint) 70%,
    var(--bg) 100%
  );
  color:        var(--text);
  padding:      0;
  border-radius: 0;
}
.page-header::before,
#journal-header::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     url('figures/background.png') center / cover no-repeat;
  opacity:        0.08;
  pointer-events: none;
  z-index:        0;
}
.page-header > *,
#journal-header > * { position: relative; z-index: 1; }

.page-header-inner { max-width: 1100px; margin: 0 auto; padding: 40px 48px 56px; }

.page-eyebrow {
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  16px;
}

.page-header h1,
.hero h1,
.jumbotron h1 {
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    700;
  line-height:    1.08;
  letter-spacing: -0.025em;
  color:          var(--primary);
  margin-bottom:  14px;
}
.page-header-meta { font-size: 1rem; font-weight: 500; color: var(--text-muted); }

/* ── Headings ── */
h1, h2, h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  color:       var(--primary);
}

/* ── Article titles ── */
.article-title a,
.article-title {
  color:       var(--primary);
  font-weight: 700;
}

/* ── Article cards ── */
.card,
.article-summary,
.article-block {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--jw-radius);
  box-shadow:    var(--jw-shadow);
  transition:    box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover,
.article-summary:hover {
  box-shadow: 0 6px 18px rgba(27,58,107,0.12);
  transform:  translateY(-2px);
}

/* ── Sidebar / metadata panels ── */
.sidebar,
aside,
#article-metadata {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 12px;
  padding:       24px;
  box-shadow:    var(--jw-shadow);
  margin-bottom: 20px;
}

/* Sidebar card title */
.sidebar-card-title {
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  16px;
}
.sidebar-links        { display: flex; flex-direction: column; gap: 10px; }
.sidebar-link         { display: block; font-size: 0.88rem; font-weight: 500; color: var(--accent); text-decoration: none; }
.sidebar-link:hover   { text-decoration: underline; }
.sidebar-link-note    { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* ── Date components ── */
.date-row         { margin-bottom: 14px; }
.date-row:last-child { margin-bottom: 0; }
.date-lbl         { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); margin-bottom: 2px; }
.date-val         { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.date-note        { font-size: 0.68rem; color: var(--text-muted); font-style: italic; margin-top: 1px; }
.date-divider     { border: none; border-top: 1px solid var(--border); margin: 14px 0; }

/* ── Topic grid ── */
.topic-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
}
.topic-item {
  padding:       16px 20px;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-left:   3px solid var(--accent-light);
  border-radius: 8px;
  font-size:     0.88rem;
  font-weight:   500;
  color:         var(--text);
}

/* ── Tables ── */
table {
  width:           100%;
  border-collapse: collapse;
}
th {
  background-color: var(--primary);
  color:            #fff;
  padding:          0.5rem 0.75rem;
  font-weight:      600;
}
td {
  padding:       0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
tr:nth-child(even) td { background-color: var(--bg-alt); }

/* ── Issue / volume badges ── */
.badge,
.label {
  background-color: var(--cta);
  color:            #fff;
  border-radius:    var(--jw-radius);
  padding:          0.2em 0.55em;
  font-size:        0.78em;
  font-weight:      600;
}

/* ── Placeholder (pages not yet built) ── */
.placeholder { max-width: 1100px; margin: 0 auto; padding: 56px 48px 120px; }
.placeholder p { font-size: 0.97rem; color: var(--text-muted); line-height: 1.78; margin-bottom: 14px; }

/* ── Footer ── */
footer,
#footer {
  background:  var(--primary);
  color:       #C5D0E0;
  padding:     40px 48px;
  margin-top:  3rem;
  font-size:   0.9rem;
}
.footer-inner {
  max-width:       1100px;
  margin:          0 auto;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  flex-wrap:       wrap;
}
.footer-wordmark         { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-wordmark .wm-abbr  { color: #fff; font-size: 1.5rem; }
.footer-wordmark .wm-sep   { background: #4A6080; }
.footer-wordmark .wm-name  { color: #8FA4C0; }
.footer-tagline          { font-size: 0.82rem; font-style: italic; font-weight: 300; color: #8FA4C0; }
.footer-copy             { font-size: 0.75rem; color: #6B849E; }
.footer-attr             { font-size: 0.72rem; color: #6B849E; }
.footer-attr a           { color: #6B849E; text-decoration: underline; }
.footer-attr a:hover     { color: #C5D0E0; }

footer a,
#footer a       { color: rgba(255,255,255,0.90); }
footer a:hover,
#footer a:hover { color: #fff; }

/* ── Mobile ── */
@media (max-width: 768px) {
  nav,
  nav.navbar,
  .navbar { padding: 0 16px; }

  .nav-toggle { display: flex; }

  .nav-links {
    display:       none;
    position:      absolute;
    top:           68px;
    left:          0;
    right:         0;
    background:    var(--surface);
    border-top:    1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow:    0 4px 16px rgba(27,58,107,0.12);
    flex-direction: column;
    gap:           0;
    margin:        0;
    padding:       8px 0;
  }
  .nav-links.open       { display: flex; }
  .nav-links li a       { display: block; padding: 12px 20px; }

  .page-header-inner    { padding: 28px 20px 36px; }
  .placeholder          { padding: 40px 20px 80px; }
  .hero, .jumbotron     { padding: 2rem 1rem; }
  footer, #footer       { padding: 32px 20px; }
  .footer-inner         { flex-direction: column; align-items: flex-start; gap: 12px; }
  .topic-grid           { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .topic-grid { grid-template-columns: 1fr; }
}