/* styles.css */

/* Import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Lexend:wght@300;400;600;700&display=swap');

/* ---- Variables ---- */
:root{
  --page-bg: #0b0b0b;
  --text-color: #e6e6e6;
  --muted: #cfd8ff;
  --card-radius: 8px;

  /* Explicit canonical sizes */
  --widget-w-standard: 520px;   /* standard plot width */
  --widget-w-narrow: 455px;     /* narrow plot width */
  --widget-h: 390px;            /* maximum plot height */
  --officer-h: 320px;
  --bans-h: 320px;

  --content-gap: 14px; /* gap between adjacent content */
  --text-box-min: 160px;
}

body{
  background: var(--page-bg);
  color: var(--text-color);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  margin: 16px;
  line-height: 1.35;
}

/* Headings */
h1{ font-family: "Lexend", system-ui; color:#fff; font-weight:700; font-size:1.8rem; margin:0.5rem 0 0.8rem; }
h2{ font-family: "Lexend", system-ui; color:#40a1ca; font-weight:600; font-size:1.2rem; margin:1rem 0 0.5rem; }

/* Keep your existing look for text-boxes but inherit typography from body */
.text-box{
  /* typography: inherit everything from body */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;

  /* visual card styles */
  flex: 1 1 0;
  min-width: var(--text-box-min);
  box-sizing: border-box;
  padding: 14px;
  border-radius: var(--card-radius);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

/* Ensure page/document title and any h1 have a larger gap below them */
h1,
.quarto-title,
.quarto-title .title,
.quarto-title-block .title,
.page-title,
.title {
  margin-bottom: 2rem;
}

/* ---- Row container ---- */
.content-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--content-gap);
  align-items: flex-start;
  margin-top: 1.0rem;
  margin-bottom: calc(var(--content-gap) + 50px);
  width: 100%;
  box-sizing: border-box;
}

/* Link colour */
a {
  color: #6f7dbd;
}

/* ---- Widgets (plots) ---- */
.widget{
  box-sizing: border-box;
  margin: 0;
  border-radius: var(--card-radius); /* keeps contained corners */
  background: transparent;           /* important: no card background */
  box-shadow: none;                  /* important: remove visible cards/shadow */
  overflow: visible;                 /* avoid clipping the bottom of plots */
}

/* Standard and narrow widths */
.widget.standard {
  flex: 0 0 auto;
  width: var(--widget-w-standard);
  max-width: 100%;
  min-width: 260px;
}

.widget.narrow {
  flex: 0 0 auto;
  width: var(--widget-w-narrow);
  max-width: 100%;
  min-width: 200px;
}

/* Embedded htmlwidgets / iframes / svg: scale to width, keep height proportional */
.widget .htmlwidget,
.widget iframe,
.widget svg,
.widget .plot-container {
  width: 100% !important;
  height: auto !important;               /* allow natural/aspect preserving height */
  max-height: var(--widget-h);           /* prevents widgets becoming extremely tall */
  display: block;
}

/* If a particular widget sets an inline height, allow it but constrain max-height */
.widget iframe[height],
.widget .htmlwidget[style*="height"] {
  max-height: var(--widget-h) !important;
  height: auto !important;
}

/* Accessibility focus outline */
.widget:focus-within {
  outline: 3px solid rgba(120,136,209,0.12);
  outline-offset: 3px;
}

*/
.text-box{
  flex: 1 1 0;               /* grow to take remaining space */
  min-width: var(--text-box-min);
  box-sizing: border-box;
  padding: 14px;
  border-radius: var(--card-radius);
  background: rgba(255,255,255,0.03); /* subtle card for text only */
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--text-color);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* ---- Image cards ----
.img-card{
  box-sizing: border-box;
  border-radius: var(--card-radius);
  background: transparent;
  overflow: visible;      /* allow the image to define its height if needed */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;           /* small breathing room */
  flex: 0 0 auto;
  width: auto;            /* let specific variants set width */
  max-width: 100%;
}

/* Officer image: match approx standard width but let image scale */
.img-card.officer {
  width: var(--widget-w-standard);
  max-width: 100%;
}

/* BANs image: slightly narrower by default */
.img-card.bans {
  width: calc(var(--widget-w-standard) * 0.9);
  max-width: 100%;
}

/* The image itself: keep aspect ratio, scale down to fit both width and height.
   Critically: use max-height to prevent excessive tall images, and height:auto so
   the image never stretches and is never clipped.
*/
.img-card img{
  display: block;
  width: 100%;                 /* prefer to fill available width */
  height: auto;                /* preserve aspect ratio */
  max-width: 100%;
  max-height:  calc( (var(--officer-h) + var(--bans-h)) / 2 ); /* safe upper bound */
  object-fit: contain;         /* show the whole image */
  margin: 0 auto;
}

/* If you want explicit different height caps per image, use these overrides */
.img-card.officer img {
  max-height: var(--officer-h);
}
.img-card.bans img {
  max-height: var(--bans-h);
}

/* Small-screen behavior */
@media (max-width: 760px){
  .img-card { width: 100% !important; padding: 4px; }
  .img-card img { width: 100%; height: auto; max-height: none; }
}