/* ==========================================================================
   base.css
   Design tokens (colours, spacing, fonts), reset and basic typography.
   Loaded on every page, before layout.css.

   Contents
     1. Design tokens   ← change colours, widths and fonts here
     2. Reset
     3. Typography and links
     4. Accessibility helpers
     5. User preferences
     6. Entry headings (Events, Grants)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Palette: "Baltic blue" (chosen Oct 2026)
     Contrast on --paper: ink 15.2:1, ink-soft 6.5:1, accent 6.8:1 (all pass WCAG AA) */
  --ink: #16212b;                      /* main text: blue-black */
  --ink-soft: #4f5b66;                 /* secondary text: slate grey */
  --paper: #f6f7f5;                    /* page background: cool off-white */
  --line: rgba(22, 33, 43, .14);       /* rules and borders: ink at 14% */
  --shadow: rgba(22, 33, 43, .08);     /* soft shadow under the submenu */
  --shadow-strong: rgba(22, 33, 43, .15); /* floating Top / Bottom buttons */
  --accent: #1d5a8c;                   /* links and highlights: deep Baltic blue */
  --accent-tint: #e4edf5;              /* light blue background, e.g. link tags on Publications */
  --highlight: #f5e3a1;                /* label backgrounds, e.g. years on News: soft yellow */
  --highlight-strong: #efd47a;         /* the same, on hover */
  --on-highlight: #16212b;             /* text on the yellow, in light and dark appearance */
  --current-mark: #e5bd48;             /* underline of the current page in the menu */

  /* Layout */
  --max: 1080px;                       /* maximum content width */
  /* Content widths:
     --content-max: width of the content on every page (text, lists, collapsible
                    sections, images and logos) — the same on all pages
     --text-max:    the text column when images or logos sit beside it (Grants, Events) */
  --content-max: 62rem;
  --text-max: 40rem;
  --measure: 48rem;                    /* longest line of running text (lists keep full-width dividers) */
  --gutter: clamp(1rem, 4vw, 2.5rem);  /* left/right page margin */
  --space: clamp(2rem, 5vw, 3.5rem);   /* vertical space between blocks */
  --tap: 44px;                         /* minimum touch-target height */

  /* Spacing between entries */
  --entry-space: 2rem;                 /* rich entries: grants, events */
  --item-space: 1rem;                 /* list items: news, publications, learning */

  /* Divider lines: only two kinds on the whole site */
  --rule: 1px solid var(--line);       /* between entries and sections */
  --rule-strong: 2px solid var(--ink); /* under table headings */

  /* Type scale: the only text sizes used on the site */
  --fs-title: clamp(1.6rem, 1.2rem + 1.6vw, 2rem);   /* page title */
  --fs-heading: 1.3rem;                /* labels of sections, entry headings */
  --fs-subheading: 1.05rem;            /* small headings inside a section */
  --fs-body: 1rem;                     /* text on phones */
  --fs-reading: 1.0625rem;             /* text from tablet width up (17px) */
  --leading: 1.55;                     /* line spacing of text */
  --fs-small: .875rem;                 /* dates, notes, menu, buttons, footer */
  --fs-label: .85rem;                  /* small letter-spaced labels, shortcut boxes, tags */

  /* Yellow labels (News years, section names, event banners, "Other Grants"):
     one size everywhere */
  --label-size: var(--fs-heading);

  /* Entry headings: the first line of each event (Events page) and each
     grant (Grants page). Change these to restyle all of them at once. */
  --entry-title-font: var(--heading);
  --entry-title-size: var(--fs-heading);
  --entry-title-weight: 700;
  --entry-title-color: var(--accent);
  --entry-title-bar: 3px solid var(--accent);   /* line on the left; "none" to remove */
  --entry-title-gap: .6rem;            /* space below the heading */
  /* Date shown on its own line under an entry heading (Grants) */
  --entry-date-size: var(--fs-small);
  --entry-date-weight: 500;
  --entry-date-color: var(--ink-soft);

  /* Fonts (loaded by the <link> in each page's <head>) */
  --heading: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Body text in each device's own interface font (option E, Oct 2026):
     San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android /
     ChromeOS, Noto Sans on Linux. To return to DM Sans, swap the two lines. */
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  /* --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; */
}

@media (min-width: 1400px) {
  :root {
    --max: 1160px;
  }
}


/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;             /* gentle scrolling for Top / Bottom and in-page links */
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: var(--leading);
  font-kerning: normal;
  font-optical-sizing: auto;           /* fonts with size-specific shapes (e.g. San Francisco) use them */
  text-rendering: optimizeLegibility;
  /* No font-smoothing override: the browser's default rendering keeps text
     full-bodied and crisp (the "antialiased" setting drew it thin on Macs) */
}

/* Reading text at 17px from tablet width up (16px on phones) */
@media (min-width: 768px) {
  body {
    font-size: var(--fs-reading);
  }
}

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


/* --------------------------------------------------------------------------
   3. Typography and links
   -------------------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .15s ease;
}

a:hover {
  color: var(--ink);
}

/* Links to other websites (they open in a new tab) end with a small "↗".
   The class .link-ext is added by site.js to every external text link.
   Shortened links (.link-short) show the site name only, e.g. "2025.ijcai.org";
   their full address is in the tooltip and is printed (print.css). */
.link-ext::after,
.link-short::after {
  content: "\2197";                    /* ↗ */
  display: inline-block;
  margin-left: .2em;
  font-size: .85em;
  text-decoration: none;
}


/* Headings wrap into lines of similar length (no single word on the last
   line); paragraphs avoid a lone last word. Browsers without support simply
   wrap as usual. */
h1,
h2,
h3,
.page-title,
.entry-title,
.disclosure-title {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

/* Small headings inside a section (role titles, list titles, event sub-headings) */
.role-title,
.list-title,
.quick-title,
.ev-text .ev-h {
  font-family: var(--heading);
  font-size: var(--fs-subheading);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}


/* Logos of institutions and funders (Home, Grants): shown in calm greyscale,
   in their own colours when pointed at. */
.logos img,
.grant-logos img {
  filter: grayscale(1) contrast(1.15);
  opacity: .9;
  transition: filter .2s ease, opacity .2s ease;
}

.logos li:hover img,
.grant-logos a:hover img,
.grant-logos img:hover {
  filter: none;
  opacity: 1;
}

@media print, (forced-colors: active) {
  .logos img,
  .grant-logos img {
    filter: none;
    opacity: 1;
  }
}


/* --------------------------------------------------------------------------
   4. Accessibility helpers
   -------------------------------------------------------------------------- */

/* Visible outline for keyboard users */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Text for screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Skip to content" link: hidden until focused with the keyboard */
.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: .6rem 1rem;
  color: var(--paper);
  background: var(--ink);
}

.skip-link:focus {
  top: 1rem;
}


/* --------------------------------------------------------------------------
   5. User preferences
   -------------------------------------------------------------------------- */

/* Visitors who turn off motion in their system settings */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   6. Entry headings
   The first line of each event (Events) and each grant (Grants).
   Styled only through the --entry-title-* settings in section 1. Anything
   bold inside a heading takes the heading's own weight and colour, so all
   headings match.
   -------------------------------------------------------------------------- */

.entry-title {
  display: block;
  margin-bottom: var(--entry-title-gap);
  padding-left: .7rem;
  border-left: var(--entry-title-bar);
  font-family: var(--entry-title-font);
  font-size: var(--entry-title-size);
  font-weight: var(--entry-title-weight);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--entry-title-color);
}

.entry-title strong {
  font-weight: inherit;
  color: inherit;
}

/* Date under the heading, quieter than the heading itself */
.entry-title .entry-date {
  display: block;
  margin-top: .15rem;
  font-family: var(--body);
  font-size: var(--entry-date-size);
  font-weight: var(--entry-date-weight);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--entry-date-color);
}