/**
 * IE has finally sunset. And evergreen browsers are on a tear implementing
 * uber cool CSS features. It is time to revisit a simple, minimally classed
 * stylesheet that works out of the box for modern websites.
 *
 * KIS.CSS is our attempt at creating a stylesheet that lightweight, modern
 * and simply works. In addition to taking the best from the reset or normalize
 * schools of thought, it includes many commonly used composition and layout
 * classes that get you started with building websites in no time.
 *
 * Much of the rebooted kis.css rules is borrowed from similar open source
 * projects on web. Where it differs is in dropping or adding rules based on
 * the latest information available on how the evergreen browsers work, and
 * by incorporating fixes for issues faced by users of those other works.
 *
 * List of departures and arrivals:
 * 1. [Downsides of smooth scrolling](https://css-tricks.com/downsides-of-smooth-scrolling/)
 * 2. [Text rendering, optimizer for speed](https://css-tricks.com/almanac/properties/t/text-rendering/)
 * 3. [Slightly better box sizing rule](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
 * 4. [Auto underline and overline handling](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink)
 * 5. [Fluid images](https://www.zachleat.com/web/fluid-images/)
 * 6. [Notes on Josh's reset by Chris Coyier](https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/)
 * 7. https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height/38908284#38908284
 * 8. [Position: relative](https://developer.mozilla.org/en-US/docs/Web/CSS/position)
 *
 * Credits:
 * 1. [Custom CSS Reset by Josh](https://www.joshwcomeau.com/css/custom-css-reset/)
 * 2. [Modern CSS Reset by Andy](https://piccalil.li/blog/a-modern-css-reset/)
 * 3. [CSS Reset by 30secondsofcode](https://www.30secondsofcode.org/articles/s/css-reset)
 */

@import 'reset.css'; /* our reset */
@import 'theme.css'; /* minimal theme */

/*** @layer kiscss enhancements on top of reset ***/
body {
  /* inheritable properties */
  color: var(--neutral-text);
  background: var(--neutral-background);
  font-size: var(---size-m);
  font-family: var(--font-family-base);
  line-height: 1.4;
  letter-spacing: var(--tracking);
}

/* 
  as the size of the font increases, decrease the ratio 
  of the line height as much as the font allows for aesthetic
*/
h1, h2, h3 {
  max-width: 24ch;
  letter-spacing: var(--tracking);
  line-height: 1.25;
}

h1 {
  font-size: var(--size-2xl);
}

h2 {
  font-size: var(--size-xl);
}

h3 {
  font-size: var(--size-l);
}

h4 {
  font-size: var(--size-m);
}

h5 {
  font-size: var(--size-s);
}

h6 {
  font-size: var(--size-xs);
}


/* 
  aim for 65-75 ch for 16 pixel font, reduce for
  chunky fonts that have bigger character widths
*/
p, li, blockquote:not([class]) {
  max-width: 65ch;
}

blockquote:not([class]) {
  font-family: var(--font-family-serif);
  font-size: var(--size-l);
}

blockquote:not([class]) p:last-of-type {
  font-family: var(--font-family-base);
  font-size: var(--size-m);
  font-weight: normal;
}

/* 
  fix svg icons and images to have a default size; they
  blow up the page otherwise; more specific rules can do
  the right thing downstream.
*/
:where(a img[src$=".svg"]) {
  height: 8ex;
  width: auto;
  flex: none
}

:where(code, kbd, samp, pre) {
  font-family: var(--font-family-mono);
  font-size: 1em;
}

/** display an outline when an element is in focus **/
:focus {
  outline: 2px solid;
  outline-offset: 0.3ch;
}

/** 
  set default top margin of the scroll snap area that is used for
  snapping this box to the snapport; 
  
  NOTE: is this within the scope of kis.css? 
**/
:target {
  scroll-margin-top: 4ex;
}

/** be nice when user selects **/
::selection {
  background: var(--neutral-text);
  color: var(--neutral-background);
}

/* 
 scale down images inside nav (typically logo, icons reside here)
 ... scale them down so the page layout looks half decent when the
 user unwittingly embeds a large image or svg (without viewbox?)
*/
nav :is(img, svg) {
  object-fit: scale-down;
}