/*
Theme Name:  ZIS
Theme URI:   https://zis.ac.rs/
Author:      Association of Institutes of Serbia
Description: Theme for the website of the Association of Institutes of Serbia. Cyrillic, Latin and English, without a single plugin.
Version:     1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: zis
*/

/* ==========================================================================
   WHERE THINGS LIVE

   The styles are split across three files, by WHO AUTHORS the thing being
   styled. That is the only split that will not blur over time.

     style.css          ← this file
                          the theme header, colors and measurements.
                          THIS is where the look of the whole site is changed.

     assets/theme.css      what the theme prints and the editor cannot touch:
                          header, menu, footer, page frame, home page.
                          Changed rarely.

     assets/content.css   everything the editor creates in the block editor —
                          paragraphs, headings, lists, buttons, PDF files.
                          Every selector there starts with .content

   The question „where is this styled“ has one answer: if the editor can
   create it in wp-admin, it is in content.css; otherwise in theme.css.

   The load order is set in functions.php and has to stay like this:
   font → style.css → theme.css → content.css
   ========================================================================== */


/* ==========================================================================
   COLORS AND MEASUREMENTS
   The values come from _design/palette.css.
   ========================================================================== */

:root {
  /* The official colors from the 2015 brand book. Not to be touched. */
  --brand-blue: #005BAB;   /* C100 M70 Y0 K0 · Pantone 2945C */
  --brand-red:  #DA291C;   /* Pantone 485C — used sparingly */

  /* A scale derived from the brand blue */
  --blue-100: #E5EDF5;
  --blue-200: #B8D1E8;
  --blue-300: #80ADD5;
  --blue-400: #337CBC;
  --blue-500: #005BAB;
  --blue-600: #004989;
  --blue-700: #003B6F;
  --blue-800: #00294D;

  /* Surfaces */
  --surface-outer: #EFEAE0;   /* the outer frame, beige */
  --surface-band:  #FFFFFF;   /* the white band with the mark */
  --surface-body:  #EBF2F8;   /* the part holding the text */

  /* Text */
  --text:          #1A1A1A;
  --text-muted:    #55606B;
  --text-on-brand: #FFFFFF;

  /* Elements */
  --button-bg:       var(--brand-blue);
  --button-bg-hover: #00437E;
  --link:            var(--brand-blue);
  --rule:            var(--brand-blue);
  --hairline:        #CFD8E2;

  /* Measurements */
  --content-width: 960px;
  --gutter: 1rem;
  --radius: 2px;
  --band-width: 34%;

  /* How far the text is indented from the edge of the box. The header uses
     the same value, so that the mark and the menu sit on the same vertical
     line as the text below. */
  --indent: 2rem;

  /* The height of the mark in the header bar. The height of the bar on the
     home page, where there is no mark, is derived from it. */
  --mark-height: 54px;

  --font: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --fs-page-title: clamp(1.55rem, 1.1rem + 1.9vw, 2.3rem);
  --fs-body: 1.0625rem;
  --lh-body: 1.65;
}

/* On a narrow screen the indent shrinks — the header and the content move
   together, because both read the same value. */
@media (max-width: 720px) {
  :root { --indent: 1.25rem; }
}