/*=====
    This project is based on
    https://github.com/paceaux/typography-baseline
=====*/

/*
    Comment-A: 
    rem for left-right, for consistent alignment.
    em for top/bottom, so the spacing is relative to font-size  
*/
:root {
/*===== 
    #Color #Palette 
    Variables follow convention found here: https://codepen.io/paceaux/pen/XdxQza
    Gray scale pallette is based on Tailwind´s setup: https://tailwindcss.com/docs/customizing-colors
=====*/
  

    --colorGray100: hsl(240, 4%, 5%);                        /* Deepest gray:        #0d0d0e;     rgb(17, 24, 39) */
    --colorGray90:  hsl(240, 1%, 15%);                          /* Deeper gray:       #252526;     rgb(41,47,61) */
    --colorGray80:  hsl(0, 1%, 24%);                         /* Deep gray :         #3d3d3e;     rgb(65, 70, 82) */
    --colorGray70:  hsl(0, 0%, 34%);                        /* Mid gray:           #565656;       rgb(88, 93, 104) */
    --colorGray60:  hsl(0, 0%, 53%);                      /* Light gray:         #6e6e6e;         rgb(112, 116, 125) */
    --colorGray50:  hsl(218, 5%, 55%);                     /* Lighter gray:        #868687;         rgb(136, 140, 147) */
    --colorGray40:  hsl(220, 5%, 65%);                     /* Very light gray *    #9e9e9f;         rgb(160, 163, 169) */
    --colorGray30:  hsl(220, 4%, 73%);                     /* Almost white *       #b6b6b7;         rgb(184, 186, 190) */
    --colorGray20:  hsl(216, 5%, 82%);                     /* Light Gray *         #cfcfcf;         rgb(207, 209, 212) */
    --colorGray10:  hsl(210, 4%, 91%);                     /* Almost white *       #e7e7e7;         rgb(231, 232, 233) */

/*    -----------*/


    --colorBlue100: hsl(245, 99%, 48%);                         /* Almost black blue:  #1601f5;     rgb(22, 1, 245) */
    --colorBlue90:  hsl(245, 92%, 53%);                        /* Deep blue:          #2d1af6;      rgb(45, 26, 246) */
    --colorBlue80:  hsl(245, 92%, 59%);                        /* Dark blue :         #4534f7;      rgb(69, 52, 247) */
    --colorBlue70:  hsl(245, 92%, 64%);                        /* Bold blue :         #5c4df8;      rgb(92, 77, 248) */
    --colorBlue60:  hsl(245, 92%, 69%);                      /* Fresh blue :        #7367f9;        rgb(115, 103, 249) */
    --colorBlue50:  hsl(245, 92%, 74%);                      /* Mid blue:           #8b80fa;        rgb(139, 128, 250) */
    --colorBlue40:  hsl(246, 92%, 79%);                      /* Light blue :        #a299fb;        rgb(162, 153, 251) */
    --colorBlue30:  hsl(245, 92%, 85%);                      /* Deep pastel blue:   #b9b3fc;        rgb(185, 179, 252) */
    --colorBlue20:  hsl(245, 92%, 90%);                      /* Pastel Light blue : #d0ccfd;        rgb(208, 204, 253) */
    --colorBlue10:  hsl(245, 92%, 95%);                      /* Very light blue:    #e8e6fe;        rgb(232, 230, 254) */
    
    /* ----------------------------------------------------------------------------------------------------- */

    --colorWhite: hsl(0, 0%, 100%);                          /*  White              #FFF;           rgb(255,255,255) */

    --colorBlack: hsl(0, 0%, 0%);                                /*  Black          #000;           rgb(0, 0, 0) */

    /*---------------------------*/

    --colorPrimary: var(--colorBlue90);                        /*  Blue 90   #061A57; hsl(--%);  */
    
    --colorSecondary: var(--colorBlue20);                      /* Blue 20 #C7D5F9;  hsl (--%) */
    
    --colorTertiary: var(--colorGray20);                       /* Gray 20 #cfd1d4;  hsl (--%)  Blue 20 #C7D5F9*/ 

/*===== 
    Colors
    #Color #Link #Border 
    Variables follow convention found here: https://gist.github.com/paceaux/8638765e747f5bd6387b721cde99e066#sassscssstylus-naming
=====*/
    --baseTextColor: var(--colorGray100);
    --baseEditorialTextColor: var(--colorGray100);   
    --baseInlineBorderColor: var(--colorGray500);

/*===== 
    #LineHeight 
=====*/
    --lineheight-base: 1.5;    
    --lineheight-sm: 1.168;

    /*===== 
    #LetterSpacing 
=====*/
    --letterspace-sm: -0.063rem;
    --letterspace-xs: -0.125rem;
  

/*===== 
    #Body #Size #Paragraph #content-flow
=====*/
    --text-xxl :  1.953em;         
    --text-xl:1.563em;        
    --text-lg: 1.25em;        
    --text-base: 1em;            
    --text-sm: .8em;          
    --text-xs: .64em;       
    --text-xxs: .512em;         

/*===== 
    #Heading #Title #Size
    The small title sizes use the big text sizes; so they overlap
    They're here, though, so that, if desired, we can deviate and not have them overlap
=====*/
    --title-xxl: 4.768em; /* (16 x 1.618) x 1.618 */   
    --title-xl: 3.815em;                                
    --title-lg: 3.052em;                                
    --title-base: 2.441em;                                
    --title-sm: var(--text-xxl);                 
    --title-xs: var(--text-xl);                
    --title-xxs: var(--text-lg);                

/*===== 
    #Font #FontFamilies #Typeface #Code  #Heading #Paragraphs ===
    base is meant to be what's applied to the majority of body copy
    title could also be called "headline", but would be  w/ other vars
=====*/
    --baseFontFamily: 'hero-new', Helvetica Neue, Helvetica, Arial, sans-serif;
    --titleFontFamily: 'linotype-sabon', Georgia, serif;
    --codeFontFamily: monospace;
}

html {
    font-size: 1em;
    color: #373737; 
    color: var(--baseTextColor);
    font-family: var(--baseFontFamily);
    font-size: calc(.5vw + 1rem); /* the font-size can scale up as the browser window gets larger, but doesn't get hard to read when the browser window shrinks*/
    line-height: var(--lineheight-base);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility; 
    
}


/*=====
  #Everything
=====*/


h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
pre,
.button {
    line-height: 1.618;
    line-height: var(--lineheight-sm);
    margin: .618rem 0 .618rem; /* Comment-A */
}


/*=====
  #Headings
=====*/

h1,
h2,
h3,
h4,
h5,
h6 {
 
    /*font-family: Helvetica Neue, Helvetica, Arial, sans-serif;*/
    font-family: var(--titleFontFamily);
    margin-bottom: calc(1.618vmin - 1vmax + .35em); /* increases margin as screen width gets smaller */
    color:  var(--colorGray90);
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;   
}

h1,h2,h3 {
   letter-spacing: -1px;
}

h1 {
    font-size: var(--title-xxl);
}

h2 {
    /*font-size: 1.618em;*/
    font-size: var(--title-xl);
    
}

h3 {
    font-size: var(--title-base);
}

h4 {
    font-size: var(--title-sm);
}

h5 {
    font-size: var(--title-xs);
}

h6 {
    font-size: var(--text-base);
}

p {
    font-size: var(--text-base);
    font-family: var(--baseFontFamily);
    color: var(--colorGray90);
    font-style: normal;
    font-weight: 800;
    font-stretch: normal;
    margin: 1rem 0 1.5rem;
    letter-spacing: -.4px;
}

p,
blockquote {
    /*line-height: 1.618;*/
    line-height: var(--baseLineHeight);
}

/*==========
#Buttons
==========*/

.primary--button,
.secondary--button,
.tertiary--button {

    font-family: var(--baseFontFamily);
    font-size: var(--text-sm);
    display:inline-block;
    padding: 0.6em 1.4em 0.6em;
    margin: 1rem 0 .618rem;
    border-radius: 2em;
    box-sizing: border-box;
    text-decoration:none;
    text-align:center;
    transition: all 0.2s;
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    font-weight:400;
    cursor: pointer;
    user-select: none;
}

.primary--button:active,
.secondary--button:active,
.tertiary--button:active {
    position: relative;
    top:  2px;
}

.primary--button {
    border: 2px solid var(--colorPrimary);
    background-color: var(--colorPrimary);
    color: var(--colorWhite);
}

.primary--button:hover {
    border: 2px solid var(--colorBlue70);
    background-color: var(--colorBlue70);
    color: var(--colorWhite);
}

.primary--button:active {
    border: 2px solid var(--colorBlue100);
    background-color: var(--colorBlue100);
    color: var(--colorGray50);
}

.secondary--button {
    border: 2px solid var(--colorPrimary);
    background-color: var(--colorWhite);
    color: var(--colorPrimary); 
}

.secondary--button:hover {
    border: 2px solid var(--colorPrimary);
    background-color: var(--colorBlue20);
    color: var(--colorPrimary);
}

.secondary--button:active {
    border: 2px solid var(--colorPrimary);
    background-color: var(--colorBlue40);
    color: var(--colorBlue60);
}

.tertiary--button {
    border: 2px solid transparent;
    background-color: transparent;
    color: var(--colorPrimary); 
}

.tertiary--button:hover {
    border: 2px solid var( --colorGray10);
    background-color: var( --colorGray10);
    color: var(--colorPrimary);
}

.tertiary--button:active {
    border: 2px solid var(--colorGray30);
    background-color: var(--colorGray30);
    color: var(--colorGray50);
}

/*==========
#Focus styles
==========*/

/*+Add  role="button" tabindex="0" to html element*/

textarea:focus, 
input:focus{
    outline: none;
}

*:focus {
    outline: none;
}

.primary--button:focus,
.secondary--button:focus,
.tertiary--button:focus {
 
  box-shadow: 0 0 0 4px rgb(149 149 147 / 50%);   /* Gray 100 #303130 */
}

/*=====
#Links
=====*/

a {
    text-decoration: none;
    transition: all .1s linear;
}

a.link,
a.p-link {
     cursor: pointer;
}

a.link {
    color: var(--colorGray90);
    font-family: 'hero-new';
    font-weight: 800;
    font-size: .82em;
}

a.link:hover {
    color: var(--colorGray100);
    /*border-bottom: 1px solid var(--colorBlue40);*/
    background-color: var(--colorBlue30);
    border-radius: 12px;
}

a.link:active {
    color: var(--colorBlue100);
    background-color: var(--colorBlue60);
}

a.v-link {
    color: #AC5F5A;  
}

a.v-link:hover {
    color: var(--colorGray60);
}

a.v-link:active {
    color: var(--colorGray60);
}

a.p-link {
    color: var(--colorWhite);
}

a.p-link:hover  {
    color: var(--colorBlue50);
}

a.p-link:active {
    color: var(--colorGray60);
}

/*=====
  #Lists
=====*/

ul,
ol,
dl {
    padding: .618em .618rem; /* Comment-A */
}


li {
    text-indent: -.9em;
    line-height: 1.618;
    line-height: var(--lineheight-sm);
    padding: 0;
    margin: 0 0 0 .618rem;
}

li {
    list-style-type: none;
    /*list-style-position: inside;*/
}

dt {
    text-indent: -.618rem;
}

dd {
    margin: 0;
    padding: 0 .618rem 0 .618rem;
}

/*=====
#Brand Colors
=====*/
.blue {
  color: #06BFFC;
}

.red {
  color: #DD0100;
}

.yellow {
  color: #ffb200;
}

.a-blue {
  color: #2343d6;
}

.e24 {
  color: #FFFBF8;
}

.vend {
    color: #9d5751;
}

/*=====
  #Paragraphs #Blocks
=====*/

hr {
    color: #a5a5a5;
    color: var(--colorGray500);
    border-width: .0625em;
    border-style: solid;
    margin: 1.618em .618rem;
}


/* Credit where it's due:
    https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
*/

blockquote {
    color: var(--colorGray90);
    background: var(--colorWhite);
    /*border-left: 10px solid #dcdcdc;*/
    border-left: 10px solid var(--colorPrimary);
    margin: .618em .618rem; /* Comment-A */
    padding: 1.618em 1.618rem;
    quotes: "\201C""\201D""\2018""\2019";
    /*font-weight: 600;*/
    font-size: var(--text-xxl);
    letter-spacing: var(--letterspace-sm);
}

blockquote::before {
    color: #374151;
    color: var(--colorGray700);
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}


/*=====
  #Content-Flow
=====*/

em,
i,
cite {
    font-style: italic;
}

strong,
b {
    font-weight: 700;
}

cite {
    display: block;
    text-align: right;
}

u {
    text-decoration: none;
    border-bottom: 1px dotted red;
}

small,
sub,
sup {
    font-size: var(--text-xxs);
    line-height: var(--lineheight-sm);
}

sub {
    vertical-align: sub;
}

sup {
    vertical-align: super;
}


/*=====
  #Content-Flow #editorial
=====*/

s,
strike,
del,
ins {
    color: #6e6e6e;
    color: var(--baseEditorialTextColor);
}

s,
strike,
del {
    text-decoration: strikethrough;
}

ins,
del {
    background-color: rgba(220, 220, 220, .25);
}

ins {
    text-decoration: none;
}


/*
mark and selection should be different, so user knows which one they've selected.

mark and selections:
  saturation: 44%
  lightness: 75%
Hue is different
*/

mark {
    background-color: rgba(165, 220, 165, .9);
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: var(--colorBlue50);
  color: var(--colorWhite);
  text-shadow: none;
}

::selection {
  background: var(--colorBlue50);
  color: var(--colorWhite);
}

/* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */
mark::selection {
    background-color: rgba(165, 220, 110, .9);
}

/* dfn and dt both do the same thing: denote a term to be defined */
dfn,
dt {
    font-style: oblique;
    font-weight: 700;
    text-transform: capitalize;
}


/*=====
#Content-flow #Code
=====*/

pre,
code,
var,
samp,
data {
    font-family: monospace;
    font-family: var(--codeFontFamily);
}

kbd,
samp,
data {
    background-color: rgba(165, 165, 165, .2);
}

kbd {
    font-size: var(--text-xs); 
    padding: .25ex .5ex;
    border: 1px solid #c1c1c1;
    border: 1px solid  var(--baseInlineBorderColor);
    border-radius: 3px;
}

/*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/
samp,
data {
    padding: 0 10px;
}

var,
data {
    font-style: italic;
}

samp {
    border-left: 5px solid #c1c1c1;
    border-left: 5px solid var(--baseInlineBorderColor);
}

data {
    padding: 0 10px;
}

pre {
    font-size: var(--text-xs);
    line-height: var(--lineheight-sm);
    padding: .618em .618rem;
    border: 1px solid #c1c1c1;
    border: 1px solid var(--baseInlineBorderColor);
    border-radius: 2px;
    overflow: scroll;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}


/*=====
  #Ruby
=====*/

ruby {
    display: ruby;
    position: relative;
    margin:0 .5ex;
    -webkit-ruby-position: before;
    ruby-position: over;
    ruby-position: before;
}

rtc, rbc {
    font-size: inherit;
    line-height: 1;
    ruby-align: start;
}

rt {
    display: ruby-text;
    font-size: .7em;
}

rt + rt {
    margin-left: .5ex;
}

rtc > bdo {
    display: -webkit-ruby-text-container;
    display: ruby-base-container;
}

/*complex ruby for chrome and Edge*/
/*only FF has "complete" ruby support*/
@supports (ruby-align: left) or ( not (display:ruby-base-container))  {

    ruby {
        display:inline-flex;
        flex-direction: column;
        vertical-align: 1em;
        line-height: 1;
    }

    rtc, rt {
        order: -1;
        flex-grow: 1;
        flex-shrink: 0;
    }

    rtc {
        display: inline-flex;
    }
}

/*Edge fixes*/
@supports  ((ruby-align: left)) {

    rtc {
        justify-content: space-between;
    }

    rt {
        display: inline-flex;
    }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}


/*==========
#Table
==========*/

table {
    font-size:  var(--text-sm);
}

caption {
    font-size: var(--text-base);
    text-transform: capitalize;
    font-style: italic;
}

th, td {
    text-align: left;
    vertical-align: middle;
    line-height: var(--lineheight-sm);
    padding: .4em .618rem;
}

th {
    font-family: var(--titleFontFamily);
    font-weight: bold;
    font-size: var(--title-lg); /*treat th in a body as h4*/
}

thead th,
tfoot th {
    font-size: 1.5em;
    font-size: var(--text-lg); /*treat th in header/footer as h3*/
}