/* Font Styles */

/* Import fonts here so they are easier to manage with the body and other html tags that use them. */
/* Font is now loaded via link tags in the head */
/* @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i&display=block"); */

/* Note: All fonts should be set in the "html" and "body" tags in order to apply univeral inheritance across the website. - MS */
/* CSS Variables : Note that these are passed into the sheet from the global css variable sheet. This allows liquid to later override global values, if customized by other systems. */

:root {
  --theme1-local-font-color: var(--theme1-global-font-rgbcolor-1);
  --theme1-local-font-size: var(--theme1-global-font-size-1);
  --theme1-local-font-weight: var(--theme1-global-font-weight-1);
  --theme1-local-input-background: var(--theme1-global-input-background-rgbcolor-1);
}

/* FONT SETS (using google cdn) : Importing fonts this way hides the link url from the header page on view source, and allows us to use a CSS variable to inject a user's chosen font selection. Add new Google font sets via a pipe" ?family=Poppins|Tangerine . Keep in mind these could delay download times. Also be sure to include all weight (bold) sizes as apparently these are independent font subsets. Note 100,200 appear to be the same as 300. 400 same as "normal" or default weight. Do not use "bold" or "bolder" as same as 700 weight. So weights 300, 500, and 600 only unique weights in Poppins that cannot be recreated except with weight values. 
Note that google fonts creates the @font-face with swap. We just need the font-face name and a fallback default font like "sans-serif" as the font loads or in case it fales. Note the google url settings control fallbacks. You just have to provide an ordered fallback font-list you can rely on in the end-user's browser. */

:root,
html {
  /* Use Absolute Font Sizes: This setting "medium" is the default font-size setting in most browsers, by default, and inherited by all other HTML elements from the html and body tags when using "rem" units. "Absolute Font Sizes" allow users with poor eyesite to change font size settings in their web browser and it reflect in the website pages, font-sizes, and dimensions they view. To make this work, you need to use "rem" units for all font sizes and dimensions. */
  /*font-size: medium;*/
  font-size: var(--theme1-local-font-size, medium);
}


html body {
  font-family: "Poppins", -apple-system, sans-serif; /* always list sans-serif browser font defaults for each OS if font fails */
  /*font-size: medium;*/
  font-size: var(--theme1-local-font-size, medium);
  color: rgba(var(--theme1-local-font-color), 1);
  font-weight: var(--theme1-local-font-weight, 400);
  -webkit-font-smoothing: antialiased; /* only use this instead of auto if you see visual improvement when scaling text */
  -moz-osx-font-smoothing: antialiased;
  font-smooth: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: auto;
}

/* mobile */
@media only screen and (max-width: 1024px) {
  :root, html {
    /* ADD SMALLER FONT-SIZE ON MOBILE: All websites inherit basic font sizes from the html and body tags. Any use of "rem" in the website references the :root or html element's font-size value. The body tag will either inherit from html or is set below, and generally cascades inheritable font size to all other elements not explicitly referencing the html root font size. In desktop mode, "medium" is the default font-size, so "small" is often used to style mobile and small screen devices. However, it can be hard to read since many HD devices may make the font even smaller. So comment out below if mobile font sizes appear too small. "small" size generally allows more content on certain low rez small screens. */
    font-size: small;
  }
  html body {
  
    /*
    min-width: auto;
    max-width: auto;
    min-height: auto;
    max-height: auto;
    margin: 0;
    padding:0;
    */
    font-size: small;
  }
}
/* anchor wrapper styling */
html body a {
  color: rgba(var(--theme1-local-font-color), 0.8);
  transition: none;
  text-decoration: none;
}

html body a:link {
  color: rgba(var(--theme1-local-font-color), 0.8);
  transition: none;
  text-decoration: none;
}

html body a:visited {
  color: rgba(var(--theme1-local-font-color), 0.7);
  transition: none;
  text-decoration: none;
}

html body a:hover {
  color: rgba(var(--theme1-local-font-color), 1);
  transition: none;
  text-decoration: none;
}

html body a:focus {
  color: rgba(var(--theme1-local-font-color), 1);
  transition: none;
  text-decoration: none;
}

html body a:active {
  color: rgba(var(--theme1-local-font-color), 1);
  transition: none;
  text-decoration: none;
}

/* inputs */
html body input,
html body input:visited,
html body input:hover,
html body input:focus,
html body input:active {
  color: rgba(var(--theme1-local-font-color), 1);
  transition: none;
}

input::placeholder {
  color: rgba(var(--theme1-local-font-color), 0.3) !important;
  transition: none;
}

textarea::placeholder {
  color: rgba(var(--theme1-local-font-color), 0.3) !important;
  transition: none;
}

/* CHROME BROWSER HACK : This partially solves a Chrome browser bug where using the autofill input attribute then choosing a text choice from the browser popup displays a font in the wrong family, size, and with a blue background! This fixes the blue background and font size, but not the font family which cannot be modified as of 4/2024. - MS */
input:-webkit-autofill,
input:-webkit-autofill:link,
input:-webkit-autofill:visited,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:focus-visible,
input:-webkit-autofill:focus-within,
input:-webkit-autofill:active {
  -webkit-background-clip: text !important;
  -webkit-box-shadow: 0 0 0px 1000px #f9f9f9 inset !important; /* hack to destroy chromes nasty blue autofill bg color */
  -webkit-text-fill-color: rgba(var(--theme1-local-font-color), 1) !important;
}

/* css color background override */
textarea {
  background: rgba(var(--theme1-local-input-background), 1) !important;
}

input,
button,
select,
textarea {
  font-family: "Poppins", -apple-system, sans-serif; /* always list sans-serif browser font defaults for each OS if font fails */
  -webkit-font-smoothing: antialiased; /* opnly use this instead of auto if you see visual improvement when scaling text */
  -moz-osx-font-smoothing: antialiased;
  font-smooth: antialiased;
  text-rendering: optimizeLegibility;
  touch-action: auto;
}

/* ================ EXIGO CODE : Font Test ===============
<div style="font-weight:100;"> Poppins Font</div>
<div style="font-weight:200;"> Poppins Font</div>
<div style="font-weight:300;"> Poppins Font</div>
<div style="font-weight:400;"> Poppins Font</div>

"normal" same as 400

<div style="font-weight:normal;"> Poppins Font</div>
<div style="font-weight:500;"> Poppins Font</div>
<div style="font-weight:600;"> Poppins Font</div>
<div style="font-weight:700;"> Poppins Font</div>
<div style="font-weight:800;"> Poppins Font</div>
<div style="font-weight:900;"> Poppins Font</div>
========================================================= */