/*-------------------------------------------------------------
-- file    : text.css
-- purpose : Style sheet for personal website Piet Lammertse
-- note 1  : Beware : inside CSS, the comment symbol is / * etc.
--             This is unlike HTML, where it is <!-- -->
-- note 2  : Multilevel menu's defined in menu.css and menu.js 
---------------------------------------------------------------
-- history :
--     2026-08-19 add draft text settable option
--     2026-07-26 new print headers and footers fall over a
--                text area cleared by a table header trick
--     2026-07-16 renamed plammertse.css to text.css,
--                added companion menu.css for menus
--     2026-07-07 unsuccessful : print headers and footers
--     2026-07-05 top banner a bit less wide
--     2026-06-22 body text now justified
--     2026-06-19 add PDF print rules, video to poster, section
--     2026-03-15 small, gradual developments
--     2025-11-21 new
--------------------------------------------------------------*/

/* Sans serif everywhere.                          */
/* Default font size seems to be 16px              */
/* Don't do body margin, it shifts the navbar :    */
/* margin-left : 32px;                             */


/* Hide draft text and menu items.                 */
/* Use persistence in draft.js to set to "block"   */
/* Use button and draft_button.js to toggle.       */
:root {
   --show-draft : none;
}

body {
  margin      : 0;
  padding     : 0;
  font-family : Arial, Helvetica, sans-serif;
  text-align  : justify;
}

/* paragraph : smaller vertical line distance,     */
/* larger left margin                              */
/* Max. column width 800 gives some 108 letters.   */
/* Word wraps can be helped with soft hyphens &shy */
p {
  margin    : 3px 32px;/* top, right, bottom, left */
  max-width : 800px;
/* font-size : 16px;  already the default, I think */
}

/* all hyperlinks darker blue (see also .crossref) */
a {
   color     : #000040;    /* #000080  */
}

/* line spacing + indent for header         */
h2 {     /* default font desktop/tablet 30/24 */
  margin     : 12px 0 0 16px;      /* top, right, bottom, left */
/*  margin-top : 16px;   */
  max-width : 800px;
}

h3 {     /* default font desktop/tablet 24/20 */
  font-size  : 20px;
  margin     : 4px 16px;
  margin-top : 16px;
  max-width : 800px;
}

h4 {     /* default font desktop/tablet 20/18 */
  font-size  : 18px;
  margin     : 2px 32px;
  margin-top : 12px;
  max-width : 800px;
}

h5, h6 {
  font-family : Arial, Helvetica, sans-serif;
  font-size  : 16px;
  font-weight: normal;
  margin     : 2px 32px;
  margin-top : 8px;
  max-width : 800px;
}

a h3 {
   color      : #000040;    /* #000080  */
}

a h4 {
   color      : #000040;    /* #000080  */
}

/* horizontal rulers are text width */
hr {
  margin-left : 32px;
  max-width   : 800px;
}

/* prevent sup and sub from increasing line height */
sup, sub {
  vertical-align:  baseline;
  position       : relative;
  top            : -0.2em;
}

sub {
  top : 0.2em;
}

/*<pre> increase fixed-spacing font size 
        ( default is 12, main text is 16 )         */
/* margin is absolute, not inside <p>              */
/* never used so far                               */
pre {
  font-size       : 15px;
  margin          : 4px 64px;
}

/* input field label not too tight with input box  */
label {
   margin-left    : 24px;
   padding-right  :  6px;
}

/* numerical input fields                          */
/* Fix for HTML bug : size not settable for number fields */
input[type=number] {
   width          : 60px;
} 

/* whole page wrapped in this table for header trick */
/* The 864px equals 800px plus two 32px margins     */
table {
   width       : min( 100%, 864px);
   /* background-color : silver;  */  /* temporary test */
}

/* fit equations and equation numbers in a table   */
.equation {
   width         : min( 90%, 775px);
   margin-left   : min(  4%,  24px);
   /* padding-right : 36px;                        */
   /* use margin-right in column with eq. numbers  */
}

/* table content (rows) spaced a little more       */
td {
  padding : 1px 0;
}

.tdcenter {
   border     : 1px solid black;
   text-align : center;
   padding    : 3px 0px 3px 0px;    /* top right bot left TBC */
}   

.tdleft {
   border     : 1px solid black;
   text-align : left;
   padding    : 3px 0px 3px 16px;   /* top right bot left TBC */
}   

/* Two equal columns that float next to each other,
   for propeller TOC */
.column {
  float        : left;
  /* surprisingly, this stacks responsive :        */
  width        : 400px;            /* half of 800  */
/* this does not stack : */  
/*  width      : min( 50%, 400px); */
  padding-left : 16px;
}

/* Use in <a> referring to sections and equations  */
.crossref {
   color            : #145680;      /* #000080     */
   text-decoration  : none;
   background-color : #F3F4F9;      /* light gray  */
   padding-left     : 3px;
   padding-right    : 3px;
}

/* Use in a <div> around figures, has margin above */
.center {
   display         : flex;
   justify-content : center;
   align-items	    : center;
   margin-left     : min(  5%, 32px);
   margin-top      : 10px;   /* this falls outside the box border */
   width  		    : min( 90%, 800px);
/*   border 		 : solid;  */  /* temporary box size debug tool */
}
/* Caption same as center for figure, only this time margin below */
.caption {
   display         : flex;
   justify-content : center;
   align-items	    : center;
   margin-left     : min(  5%, 32px);
   margin-bottom   : 8px;    /* this falls outside the box border */
   width  		    : min( 90%, 800px);
/*   border 		 : solid; */   /* temporary box size debug tool */
}

/* Use <div class="draft"> .. </div> around unfinished items   */
.draft {
   background : #FFF000;      /* light orange */
   /* manipulate the variable to display all draft text and menus :  */   
   display    : var(--show-draft);
   max-width  : 832px;
}

button {
  background-color : blue;       /* #04AA6D;  */
  border           : none;
  color            : white;
  padding          : 8px 16px;  /* vertical, horizontal 15 32 */
  text-align       : center;
  text-decoration  : none;
  display          : inline-block;
  font-size        : 16px;
  margin           : 4px 2px;
  cursor           : pointer;
}
button:hover {
   background       : #E90000;      /* darkish red */
}   
button:active {
   color            : black;  
}   

/* Increase the math font size to look like 16px text.
   The extra math margin (vertical + horizontal)
   acts *inside* <p> ( and inside <td>, TBC ).                              
   <mfrac> from inline to display style cannot be fixed here,
   this needs <mstyle displaystyle="true" first every time.   */
math {
  font-size : 18px;
  margin    : 0px 32px;
}

/* Use this in a <div> around the mtable */
/* Places matrix on the right. Use .caption instead ? */
/*
.math-container {
  display         : flex;
  align-items     : left;
  justify-content : center; / * Safely centers the table without breaking rows * /
}
*/

/* AI advice for too-deep fractions below sqrt doesn't seem to work.
math, mrow {
    font-family: "Latin Modern Math", STIXGeneral,
                  DejaVu Math TeX Gyre, sans-serif;
}
*/

/* nice for numerical matrices */
mtd {
  padding    : 5px 16px;           /* top, right, bot, left */
}
 
/* Always use <mspace/> with the slash, else it won't work  */
/* <mspace> width itself does not seem to be set here       */
mspace {
   min-width : 0.5em;
}

/* this *overrides* SVG settings in code */
svg path {
   vector-effect: non-scaling-stroke;  /* TODO check if this is useful */
}

/* try to avoid text pixel jitter (no luck) */
/*
svg text {
  // A rotation small enough to be completely invisible to the human eye
  transform: rotate(0.01deg); 
  transform-origin: center;
  text-rendering : geometricPrecision;
}
*/

.footer {
   position   : fixed;
   left       : 32px;
   bottom     : 0;
   width      : min( 88%, 800px);   /* PL */
   background-color: white;
   color            : #000070;      /* dark blue
/*   text-align : right;     */     /* hard to change in HTML ? */
   text-align : center;             /* make room for next/prev "buttons" */
   padding    : 4px 0 5px 0;        /* top, right, bottom, left */
   box-sizing : border-box;
   border-top : 1px solid black;
}

/* added footer a "buttons", PL : */
.footer a  {
   background-color : #E9F0F0;         /* light blueish gray   */
   color            : #0000A0;         /* darkest blue         */
   text-decoration  : none;            /* lose the underline   */
   padding          : 2px 8px 2px 8px; /* top, right, bottom, left */
   font-style       : italic;          /* !!!!! */
}

.footer a:hover {
   background       : #E90000;      /* darkish red */
   color            : white;  
}

/* TODO  This is a nice header for printing on every page   */
/*       Trouble is, it covers the top of the normal text.  */
/*       This necessitates the table trick                  */
.header {
   position    : fixed;                /* fixed will print on every page   */
   left        : 32px;
   display     : none;                 /* only for printing, not on screen */
   /* display     : visible;  */              /* test */
/*   left        : 32px;  */
   top         : 0;                    /* note @page margin below */
   width       : min( 88%, 800px);
   background-color: white;
   color       : black;
   text-align  : center;
   padding     : 0 16px;               /* from default 32px ? */
   box-sizing  : border-box;
   border-bottom : 1px solid black;
}

section {
   break-before : page;
}

.print-only {
   display : none;
}

/* this fix successfully prevents premature mouse up events */
svg * {
  pointer-events: none; /* Prevents internal SVG paths from stealing pointer focus */
}
/*
svg {
  pointer-events: auto; / * Keeps pointer events active only on the main wrapper * /
  user-select: none;
  -webkit-user-select: none;
}
*/

@media ( max-width : 768px )  {
   .center {
      margin-left : 32px;
   }
/* temporary test code  */
/*
   table {
      background-color : yellow;
   }
*/
}

/* nicer PDF's */
@media print {

   nav, .footer a, .no-print {
      display : none !important; }
   .print-only {
      display : block !important; }
   .header {
      display : block !important; }

   /* hide navigation and footers, define class .no-print */
   /* no need for the h2 margin at top of a printed page */
   h2 {
      margin-top : 0;            /* same space as text, for header table trick */
/*      margin-top   : 8px; */ }  /* small space below header ruler */
   h2, h3, h4, h5 {
      break-after  : avoid; }
   /* This breaks the table page header trick :
   img,table {
      break-inside : avoid; }
   */
   
   .new-page {
      break-before : page;  }
   /* print margins need to be in mm */
   @page {
      /* margin-top : 24mm; }  then give header a negative position, still overlaps text */
      margin-top : 12mm; }  /* zero is at paper border, and will not print I think */

  /* Verberg de volledige video en alle bijbehorende controls */
  /* In plaats hiervan komt een non-display video still       */
  video {
    display  : none !important;
  }
}