/* ==========================================================================
   BNP-ISBA — site stylesheet
   --------------------------------------------------------------------------
   Everything the site needs lives in this one file. It is organised as:

     1. Design tokens .... colours, fonts, spacing  <- EDIT HERE for a restyle
     2. Base ............. reset + typography defaults
     3. Layout ........... page shell, main column, sidebar
     4. Components ....... header, banner, cards, tables, board, news, ...
     5. Utilities ........ small helper classes
     6. Print

   Almost any visual change (colours, width, spacing, font) can be made by
   editing a single value in section 1. Dark mode follows automatically.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Brand colours ----------------------------------------------------- */
  --brand:        #1191d6;   /* light blue: headings, accents, "BNP-ISBA" */
  --brand-dark:   #0f5e9b;   /* deep blue: links, names, emphasis */
  --brand-tint:   #e8f4fc;   /* very light blue: card and quote backgrounds */

  /* --- Neutrals (light theme) -------------------------------------------- */
  --bg:           #ffffff;   /* page background */
  --bg-soft:      #f7f9fb;   /* sidebar, table stripes */
  --bg-raised:    #ffffff;   /* cards */
  --text:         #2b3440;   /* body text */
  --text-muted:   #64748b;   /* captions, secondary text */
  --border:       #e2e8f0;   /* hairlines */
  --shadow:       0 1px 2px rgba(16, 32, 48, .05),
                  0 8px 24px rgba(16, 32, 48, .06);

  /* --- Typography -------------------------------------------------------- */
  /* Swap the next line for a webfont if you ever want one, e.g.
     --font-body: "Source Sans 3", system-ui, sans-serif;                     */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --font-head: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-base: 1rem;         /* 16px body text */
  --leading:   1.65;

  /* --- Spacing scale ----------------------------------------------------- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Shape ------------------------------------------------------------- */
  --radius:    10px;
  --radius-sm: 6px;

  /* --- Layout dimensions ------------------------------------------------- */
  /* Chosen so the text column comes out at EXACTLY 60rem on every page:
       inner pages   66 − 6 (side padding)            = 60rem
       home page     88 − 6 − 19 (news) − 3 (gap)     = 60rem
     Change --content-w and --page-w together, keeping that arithmetic. */
  --page-w:     88rem;       /* home page: text column + news column */
  --content-w:  66rem;       /* every other page: text column alone */
  --sidebar-w:  19rem;       /* the news column */
  --gap:         3rem;       /* space between the two columns */
  --pad:         3rem;       /* air between the content and the page edge */
  /* ch scales with the font size, so this stays in step with --text-base:
     at 16px it comes out just under the 60rem column. */
  --measure:   100ch;        /* reading width of running text */
}

/* --- Dark theme: only the colours change, nothing else -------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --brand:      #4bb4ec;
    --brand-dark: #7cc9f0;
    --brand-tint: #12283a;

    --bg:         #0f1620;
    --bg-soft:    #151e2b;
    --bg-raised:  #17212f;
    --text:       #dce3ec;
    --text-muted: #93a1b3;
    --border:     #26323f;
    --shadow:     0 1px 2px rgba(0, 0, 0, .4),
                  0 8px 24px rgba(0, 0, 0, .35);
  }
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

/* Headings ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.6rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.8rem); letter-spacing: -.01em;
     margin-top: var(--space-7); }
h3 { font-size: 1.15rem; margin-top: var(--space-5); }
h4 { font-size: 1rem; }

/* The first heading of a section does not need extra space above it. */
section > h2:first-child,
section > *:first-child > h2:first-child { margin-top: 0; }

/* "pretty" keeps a lone word off the last line of a paragraph. */
p  { margin: 0 0 var(--space-4); text-wrap: pretty; }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.4em; }
li { margin-bottom: var(--space-2); }

a {
  color: var(--brand-dark);
  text-decoration: none;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-dark) 35%, transparent);
  transition: color .15s ease, border-color .15s ease;
}
a:hover { color: var(--brand); border-bottom-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

strong, b { font-weight: 600; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

img { max-width: 100%; height: auto; display: block; }

iframe {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

code, pre { font-family: var(--font-mono); font-size: .9em; }

/* Skip link for keyboard users -------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--brand-dark);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-3); }


/* ==========================================================================
   3. LAYOUT
   --------------------------------------------------------------------------
   A sticky bar across the top holds the site name and the navigation. Below
   it, pages are a single centred column. The home page adds a news column on
   the right by putting class="with-news" on #wrapper.
   ========================================================================== */

/* --- 3.1 Top bar --------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--page-w);
  margin-inline: auto;
  padding: var(--space-3) var(--pad);
}

.site-name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--brand);
  border: 0;
  white-space: nowrap;
}
.site-name:hover { color: var(--brand-dark); }

/* The ISBA mark, shown as an affiliation at the right of the bar and in the
   footer. The official artwork contains a white panel, so it is always given
   a white plate to sit on: that leaves the logo untouched and keeps it legible
   in dark mode, where the plate reads as a small white chip. */
.isba-logo {
  flex: none;
  margin-left: auto;             /* pushes it to the right-hand end */
  border: 0;
  line-height: 0;
  padding: 4px 7px;
  background: #ffffff;
  border-radius: var(--radius-sm);
  transition: opacity .15s ease;
}
.isba-logo img { height: 22px; width: auto; }
.isba-logo:hover { opacity: .78; }

#nav ul {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
#nav li { margin: 0; }

#nav a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: .95rem;
  font-weight: 500;
}
#nav a:hover { color: var(--text); background: var(--bg-soft); }

/* Current page, set automatically by assets/js/site.js */
#nav a[aria-current="page"] {
  color: var(--brand-dark);
  background: var(--brand-tint);
  font-weight: 600;
}

/* --- 3.2 Page body -------------------------------------------------------
   #wrapper is the ONLY element that sets a width and centres itself. Nothing
   inside it caps its width again, which is what used to leave the content
   sitting against the left edge with empty space on the right.
   ------------------------------------------------------------------------ */
#wrapper {
  max-width: var(--content-w);
  margin-inline: auto;
  padding: var(--space-6) var(--pad) var(--space-8);
}

#main { min-width: 0; }              /* lets wide tables scroll, not overflow */

/* Running text gets a reading measure; tables, card grids and the numbered
   clause cards keep the full width of the column. */
#main > p,
#main > section > p,
#main > ul,
#main > ol:not(.boxes) { max-width: var(--measure); }

/* The home page is wider, because it carries the news column as well. */
#wrapper.with-news {
  max-width: var(--page-w);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--gap);
  align-items: start;
}

#sidebar {
  position: sticky;
  top: calc(3.5rem + var(--space-5));   /* clears the sticky bar */
  padding: var(--space-5);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .95rem;
}

/* --- 3.3 Narrow screens -------------------------------------------------- */
.nav-toggle { display: none; }

@media (max-width: 60rem) {
  :root { --pad: var(--space-4); }

  .topbar-inner { padding: var(--space-3) var(--pad); }

  /* First row: the site name, then the ISBA mark and the hamburger pushed
     right. The nav is reordered to a row of its own underneath. */
  .nav-toggle { display: inline-flex; }
  #nav { order: 3; }
  .isba-logo { order: 1; }
  .nav-toggle { order: 2; }

  #nav {
    display: none;
    flex-basis: 100%;
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    border-top: 1px solid var(--border);
  }
  #nav.is-open { display: block; }

  .topbar-inner { flex-wrap: wrap; gap: var(--space-3); }

  #nav ul { flex-direction: column; gap: 0; }
  #nav a { padding: var(--space-3); font-size: 1rem; }

  #wrapper { padding: var(--space-5) var(--pad) var(--space-7); }

  /* News moves below the page content. */
  #wrapper.with-news { display: block; }
  #sidebar { position: static; margin-top: var(--space-7); }
}


/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* Round icon button. Only the menu toggle uses it at the moment. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.icon-button:hover {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-tint);
}

.icon { width: 1.125rem; height: 1.125rem; fill: currentColor; flex: none; }

/* --- 4.2 Banner (home page hero) ----------------------------------------- */
/* The whole banner uses the same measure as running text elsewhere, so the
   heading and the paragraphs wrap on one edge shared with the rest of the site. */
#banner {
  max-width: var(--measure);
  padding: var(--space-6) 0 var(--space-7);
}
/* The banner heading is a whole sentence: "balance" would chop it into short
   ragged lines, so "pretty" is used instead — it only avoids a lone last word. */
#banner h1 { margin-bottom: var(--space-5); text-wrap: pretty; }
#banner p  { font-size: 1.1rem; color: var(--text-muted); max-width: none; }
#banner p:last-child { margin-bottom: 0; }

/* --- 4.3 Feature cards (home page) --------------------------------------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-5);
  margin: var(--space-6) 0;
}

.features article {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.features .card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
}
.features .card-icon .icon { width: 1.375rem; height: 1.375rem; }

.features h3 { margin: 0; }
.features h3 a { color: inherit; border: 0; }
.features h3 a:hover { color: var(--brand); }
.features p { font-size: .975rem; }
.features p:last-child { margin-bottom: 0; }

/* --- 4.4 Tables ---------------------------------------------------------- */
/* Wide tables scroll inside their wrapper instead of breaking the layout. */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

th, td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

thead th {
  position: sticky;
  top: 0;
  background: var(--bg-soft);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--bg-soft); }

/* The first column of the events/webinars tables holds dates. */
tbody td:first-child {
  white-space: nowrap;
  /*color: var(--text-muted); */
  font-variant-numeric: tabular-nums;
}

/* Long reference listings — the events and webinar tables — are set a step
   smaller than body text, since they are scanned rather than read. */
.list-table { font-size: .8125rem; }
.list-table td { padding-block: var(--space-3); }

/* Narrow columns holding just an "Abstract" or "Video" link. */
.link-cell {
  width: 1%;                     /* shrink to fit the link */
  white-space: nowrap;
  font-size: .95em;              /* relative, so it follows its table */
}
.link-cell a { display: inline-block; }
.link-cell a + a { margin-left: var(--space-2); }

/* The past-board table is four dense columns of "year — name" pairs. Smaller
   type and a two-column list per cell keep the years lined up and let a long
   name wrap under the name rather than under the year. */
.past-board { font-size: .8125rem; }   /* same step as .list-table */
.past-board td { padding-block: var(--space-4); }

.year-list { list-style: none; margin: 0; padding: 0; }
.year-list li {
  display: grid;
  grid-template-columns: 5.25em 1fr;
  gap: var(--space-2);
  margin-bottom: .3em;
  line-height: 1.4;
}
.year-list li:last-child { margin-bottom: 0; }
.year-list .year {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- Callout: a tinted panel for the one thing a reader must act on ------ */
.callout {
  margin: var(--space-6) 0;
  padding: var(--space-5);
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-radius: var(--radius);
  max-width: var(--measure);
}
.callout h2 { margin: 0 0 var(--space-3); font-size: 1.1rem; }
.callout p:last-child { margin-bottom: 0; }

/* A link that reads as a download, not as running text. */
.button {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-dark);
  color: #ffffff;
  font-size: .9375rem;
  font-weight: 600;
  transition: background .15s ease;
}
.button:hover { background: var(--brand); color: #ffffff; }
@media (prefers-color-scheme: dark) {
  .button { color: #0f1620; }
  .button:hover { color: #0f1620; }
}

/* --- 4.5 Numbered clauses (bylaws, clauses) ------------------------------
   One <ol class="boxes"> of <li class="box"> items. The clause number is a
   badge that sits INSIDE the card, in a reserved gutter, so it can never
   crowd the text or spill outside the page.

       ┌──────────────────────────────────────┐
       │ (3)   The offices, duties and terms  │
       │       · elected for two-year terms   │
       └──────────────────────────────────────┘
   ------------------------------------------------------------------------ */

ol.boxes {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  counter-reset: box;
  display: grid;                 /* even gaps, no margin collapsing */
  gap: var(--space-4);
}

.box {
  counter-increment: box;
  position: relative;
  padding: var(--space-5);
  padding-left: calc(var(--space-5) + 2.75rem);   /* gutter for the badge */
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.box::before {
  content: counter(box);
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;               /* matches the first line's box height */
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-dark);
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Nested bullets inside a clause. */
.box ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.15em;
  list-style: none;
}
.box ul ul { margin-top: var(--space-2); }
.box li { position: relative; margin-bottom: var(--space-2); }
.box li:last-child { margin-bottom: 0; }
.box ul > li::before {
  content: "";
  position: absolute;
  left: -1.15em;
  top: .68em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-muted);
}
.box ul ul > li::before { background: none; border: 1px solid var(--text-muted); }

/* Narrow screens: tuck the badge above the text rather than beside it. */
@media (max-width: 34rem) {
  .box { padding-left: var(--space-5); padding-top: calc(var(--space-5) + 2.25rem); }
  .box::before { top: var(--space-4); }
}

/* --- 4.6 Board members --------------------------------------------------- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.board-member h3 { margin-top: 0; margin-bottom: var(--space-3); }
.board-member .role {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand);
}
.board-member p { font-size: .975rem; }
.board-member p:last-child { margin-bottom: 0; }

.board-member .portrait {
  float: left;
  width: 8rem;
  margin: .25rem var(--space-4) var(--space-3) 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.board-member::after { content: ""; display: block; clear: both; }

@media (max-width: 30rem) {
  .board-member .portrait { float: none; margin: 0 0 var(--space-3); }
}

/* --- 4.7 News sidebar (home page only) ----------------------------------- */
#sidebar h2 {
  margin: 0 0 var(--space-4);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--text-muted);
}

.mini-posts article {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.mini-posts article:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mini-posts p { font-size: .9rem; margin: 0; color: var(--text-muted); }
.mini-posts strong, .mini-posts b { color: var(--text); }

/* --- 4.8 Footer ---------------------------------------------------------- */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: var(--page-w);
  margin-inline: auto;
  padding: var(--space-5) var(--pad) var(--space-7);
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-muted);
}
@media (max-width: 60rem) {
  .site-footer { padding-inline: var(--pad); }
}
.site-footer > div { flex: 1 1 26rem; }
.site-footer p { margin-bottom: var(--space-2); }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer .isba-logo img { height: 26px; }


/* ==========================================================================
   5. UTILITIES
   ========================================================================== */

/* Brand-coloured text. Replaces the old <font color="#1191d6"> tags. */
.brand      { color: var(--brand); }
.brand-dark { color: var(--brand-dark); }

/* An inline lead-in such as "Abstract" or "Video" next to a talk title. */
.tag {
  display: inline-block;
  padding: .05em .5em;
  border: 1px solid color-mix(in srgb, var(--brand-dark) 30%, transparent);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
a.tag { border-bottom-width: 1px; }
a.tag:hover { background: var(--brand-tint); }

.lead      { font-size: 1.1rem; color: var(--text-muted); }
.muted     { color: var(--text-muted); }
.nowrap    { white-space: nowrap; }
.stack > * + * { margin-top: var(--space-4); }

/* Visible only to screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Responsive embed, in case a video or map is ever added to a page. */
.embed { margin: var(--space-6) 0; }
.embed iframe { width: 100%; aspect-ratio: 16 / 9; display: block; }


/* ==========================================================================
   6. PRINT
   ========================================================================== */

@media print {
  .topbar, #sidebar, .embed { display: none !important; }
  #wrapper { display: block; padding: 0; max-width: none; }
  #main { max-width: none; }
  a { color: inherit; border: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}