/*** providerhub css variables ***/

:root {

  /*** base css ***/
  --base-font-family: 'Open Sans', sans-serif;
  --base-header-font-family: 'Nunito Sans', sans-serif;
  --icon-font-family: "Font Awesome 5 Pro";
  --base-font-weight: 100;
  --base-h1-font-bold: 600;
  --base-small-headers-font-bold: 300;
  --base-paragraph-size: 1rem;
  --base-paragraph-line-height: 1.75;
  --base-body-background: #fff;
  --text-letter-spacing: 0.12px;
  --header-letter-spacing: 0.5px;

  --row-class-width: 80rem;

  --single-gutter-padding: 0.9375rem;
  --double-gutter-padding: calc(var(--single-gutter-padding)*2);

  --standard-component-padding: 1rem;
  --large-component-padding: 2rem;

  --small-margin-bottom: 1.5rem;
  --medium-margin-bottom: 2.5rem;
  --large-margin-bottom: 3.5rem;

  /*** header css ***/
  --h1-mobile-font-size: 2rem;
  --h1-mobile-line-height: 1.5;

  --h2-mobile-font-size: 1.75rem;
  --h2-mobile-line-height: 1.5;

  --h3-mobile-font-size: 1.375rem;
  --h3-mobile-line-height: 1.75;

  --h4-mobile-font-size: 1.125rem;
  --h4-mobile-line-height: 1.5;

  --h1-font-size: var(--h1-mobile-font-size);
  --h1-line-height: var(--h1-mobile-line-height);

  --h2-font-size: var(--h2-mobile-font-size);
  --h2-line-height: var(--h2-mobile-line-height);

  --h3-font-size: var(--h3-mobile-font-size);
  --h3-line-height: var(--h3-mobile-line-height);

  --h4-font-size: var(--h4-mobile-font-size);
  --h4-line-height: var(--h4-mobile-line-height);

  --tablet-multiplier: 1.125;
  --desktop-multiplier: 1.25;

  /*** colors ***/
  --text-color: #0B2335;
  --inverse-text-color: #FFF;
  --primary-color: #3A60FF;
  --secondary-color: #FFF; /*** VSP Blue ***/

  --premier-color: #EF6E0B;
  --unity-color: #02B8F2;
    
  --vsp-gray: #595959;
  --vsp-dark-blue: #241ED6;
  --vsp-blue-black: #0B2335;
  --vsp-maroon: #640E87;

  --prh-danger-default: #DC1613;

  --light-background: #F2F5F7; /*** gray bkgd for LR spreads ***/
  --dark-background: #3A60FF; /*** VSP Blue ***/

  --section-color-bkgd1: #EFEFEF;
  --section-text-color-bkgd1: #0B2335;

  --section-color-bkgd2: #B4DBF7;
  --section-text-color-bkgd2: #0B2335;

  --section-color-bkgd3: #3A60FF;
  --section-text-color-bkgd3: #fff;

  --section-color-bkgd4: #0B2335;
  --section-text-color-bkgd4: #fff;
  
  --section-text-color-dark: #fff;

  --section-white-background: #fff;
  --section-text-color-white: #0B2335;

  --section-link-default: #3A60FF;
  --section-link-default-visited: #9957CB;
  --section-link-default-hover: #241ED6;

  --section-link-inverse: #FFF;
  --section-link-inverse-visited: #D8C9EF;
  --section-link-inverse-hover: #B4DBF7;

  --link-color: #3A60FF;
  --link-hover-color: #241ED6;
  --link-visited-color: #9957CB;
  --link-text-decoration: underline;

  --highliteColor1: #00b6f1;
  --highliteColor2: #003046;
  --highliteColor3: #9fcc3b;
  --highliteColor4: #f58220;
  
  --sideBarBorderColor: #979797;

}

/* JJH not sure if these should go here or in ph.css. 
   These are needed due to PH having !important added to generic headers and other stuff */
   
.section-color-background3 p,
.section-color-background3 h1,
.section-color-background3 h2,
.section-color-background3 h3,
.section-color-background3 h4,
.section-color-background3 li,
.section-color-background3 caption,
.section-color-background3 small {
    color: var(--section-text-color-bkgd3) !important;
}

.section-color-background4 p,
.section-color-background4 h1,
.section-color-background4 h2,
.section-color-background4 h3,
.section-color-background4 h4,
.section-color-background4 li,
.section-color-background4 caption,
.section-color-background4 small {
    color: var(--section-text-color-bkgd4) !important;
}

.section-color-dark p,
.section-color-dark h1,
.section-color-dark h2,
.section-color-dark h3,
.section-color-dark h4,
.section-color-dark li,
.section-color-dark caption,
.section-color-dark small {
    color: var(--section-text-color-dark) !important;
}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
  :root {

      --base-paragraph-size: calc( var(--base-paragraph-size) * var(--tablet-multiplier) );

      /*** header css ***/
      --h1-font-size: calc( var(--h1-mobile-font-size) * var(--tablet-multiplier) );
      --h1-line-height: calc( var(--h1-mobile-line-height) * var(--tablet-multiplier) );

      --h2-font-size: calc( var(--h2-mobile-font-size) * var(--tablet-multiplier) );
      --h2-line-height: calc( var(--h2-mobile-line-height) * var(--tablet-multiplier) );

      --h3-font-size: calc( var(--h3-mobile-font-size) * var(--tablet-multiplier) );
      --h3-line-height: calc( var(--h3-mobile-line-height) * var(--tablet-multiplier) );

      --h4-font-size: calc( var(--h4-mobile-font-size) * var(--tablet-multiplier) );
      --h4-line-height: calc( var(--h4-mobile-line-height) * var(--tablet-multiplier) );

  }
}

/* large and up */
@media screen and (min-width: 64em) {
  :root {

      --base-paragraph-size: calc( var(--base-paragraph-size) * var(--desktop-multiplier) );

      /*** header css ***/
      --h1-font-size: calc( var(--h1-mobile-font-size) * var(--desktop-multiplier) );
      --h1-line-height: calc( var(--h1-line-height) * var(--desktop-multiplier) );

      --h2-font-size: calc( var(--h2-mobile-font-size) * var(--desktop-multiplier) );
      --h2-line-height: calc( var(--h2-line-height) * var(--desktop-multiplier) );

      --h3-font-size: calc( var(--h3-mobile-font-size) * var(--desktop-multiplier) );
      --h3-line-height: calc( var(--h3-line-height) * var(--desktop-multiplier) );

      --h4-font-size: calc( var(--h4-mobile-font-size) * var(--desktop-multiplier) );
      --h4-line-height: calc( var(--h4-line-height) * var(--desktop-multiplier) );

  }
}