/*=============================================================================
  File:         bluephrase.com/css/var.css
  Language:     CSS
  Copyright:    Read Write Tools © 2019
  License:      CC-BY-NC-ND 4.0
  Initial date: Sep 13, 2019
  Contents:     CSS variables
=============================================================================*/

/* --------------------- layout --------------------- */
html {
	--banner-height: 2.8rem;
	--masthead-height: 2.0rem;
	--banner-height-plus-borders: calc(var(--banner-height) + 2px);
	--masthead-height-plus-borders: calc(var(--masthead-height) + 2px);
	
	--column-min-width: 12rem;
	--column-max-width: 37rem;
	--story-max-width: 52rem;
	--story-width: 40rem;
	--columns-width: 49rem; /* calc(var(--story-width) + 2*(2.2rem)); */
	--spotlight-size: 5rem; 
	--component-bottom: var(--masthead-height-plus-borders);
}

/*-------------------------- Dark mode colors -----------------------------*/
html {
	--title-color: rgba(255, 255, 255, 0.84);
	--header-color: rgba(255, 255, 255, 0.54);
	--paragraph-color: #BBB;
	--border-color: #BBB;
	--hr-color: #999;
	--figcaption-color: rgba(255, 255, 255, 0.68);	
	--background-color: #171717;
	--code-background: rgba(255, 255, 255, 0.05);
	
	--blue: #0061ff;
	--js-blue: #76afe8;
	--light-blue: #ddf;
	--title-blue: #42affa;
	--button-blue: #0089d0;
	--hover-blue: #0064d0;
	--landing-blue: #1a88ff;
	--landing-gradient: #0071eb;
	--yellow: #ffffa4;
	--message-yellow: #ffffb9;
	--pure-black: #000;
	--nav-black: #111;
	--light-black: #171717;
	--medium-black: #222;
	--black: #333;
	--form-gray: #444;
	--dark-gray: #555;
	--gray: #777;
	--bbb-gray: #bbb;
	--white: #ccc;
	--pure-white: #fff;
}

/* ------------------- media queries ------------------- */
@media only screen and (max-width: 564px) {
	html {
		--banner-height: 0px;
		--spotlight-size: 4rem; 
	}
}

/*-------------------------- rwt-sitenav component -----------------------------*/
rwt-sitenav {
	--top: var(--banner-height-plus-borders);
	--bottom: var(--masthead-height-plus-borders);
}

/*-------------------------- info & rights shadowbox -----------------------------*/
rwt-shadowbox#info,
rwt-shadowbox#rights {
	--bottom: var(--component-bottom);
	--left: 1rem;
	--min-width: 10rem;
	--optimal-width: 80vw;
	--max-width: 40rem;
	--min-height: 10rem;
	--optimal-height: 75vh;
	--max-height: 40rem;
}

/*-------------------------- rwt-reading-points component -----------------------------*/
rwt-reading-points {
	--font-size: 0.8rem;
	--panel-width: 12rem;
	--panel-height: 3rem;
	--panel-destination: 0rem;
	--holder-width: 37rem;
}

/*-------------------------- rwt-reading-summary component -----------------------------*/
rwt-reading-summary {
	--bottom: var(--component-bottom);
	--left: 1rem;
	--width: 80vw;
	--height: 75vh;
}

/*-------------------------- rwt-nested-menu component -----------------------------*/
rwt-nested-menu {
	--menu-top: var(--banner-height-plus-borders);
	--font-size: 0.8rem;
	--item-height: 2rem;
	--item-width: 11rem;
	--z-index: 2;
}

/*-------------------------- rwt-xenotools component -----------------------------*/
rwt-xenotools {
	--bottom: var(--component-bottom);
	--height: 11rem;
	--width: 30rem;
}

/*-------------------------- rwt-search component -----------------------------*/
rwt-search {
	--bottom: var(--component-bottom);
	--right: 1rem;
	--width: 80vw;
	--height: 75vh;
}

/*-------------------------- rwt-favorites component -----------------------------*/
rwt-favorites {
	--bottom: var(--component-bottom);
	--right: 1rem;
	--width: 80vw;
	--height: 75vh;
}

/*-------------------------- rwt-corner-pocket component -----------------------------*/
rwt-corner-pocket {
	--num-items: 9;
	--item-height: 2.5rem;
	--icon-size: 1.5rem;
	--width: 18rem;
	--sidebar-width: 2rem;
	--bottom: var(--component-bottom);
	--right: 1rem;
}