/* CSS for Broadcom fonts, buttons, links */

/* NOTE: when adding styles be sure to use variables as the styles will change someday */

/* VARIABLES */
/* ================================================================================ */

@import "fonts/metro/metro_fonts.css";
@import "fonts/arial/arial_fonts.css";

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

body {
    --color-primary: hsl(348, 92%, 42%);                /* #cc092f; */
    --color-primary--dark: hsl(351, 74%, 37%);		    /* #a6192e; */
    --color-secondary: hsl(200, 100%, 27%);			/* #005C8A; */
    --color-secondary--dark: hsl(191, 100%, 31%);	    /* #0083a0;	- link and button hover color */

    --color-grey--900: hsl(0, 0%, 20%);				/* #333;	-default color for all body copy and non-header text */
    --color-grey--800: hsl(214, 4%, 34%);			    /* #53565a; - backgrounds and secondary titles */
    --color-grey--700: hsl(0, 0%, 53%);				/* #878787; -used for background and secondary title */ 
    --color-grey--675: hsl(220, 2%, 66%);			    /* pantone cool gray 6 - #a8a8aa */
    --color-grey--650: hsl(180, 1%, 74%);			    /*  pantone cool gray 4 - bcbcbc */
    --color-grey--625: hsl(60, 1%, 79%);			    /* pantone cool gray 3 - #c8c8c8 */
    --color-grey--600: hsl(180, 1%, 92%);			    /* #e8e9e9;	-used for background, borders, and trim (stripe color) */
    --color-grey--500: hsl(0, 0%, 97%);				/* #f6f6f6;	-used for background, borders, and trim (stripe color) */
    --color-white: hsl(0, 0%, 100%);				    /* #fff; */
    --color-black: hsl(0, 0%, 0%);					    /* #000; */

    --font-family--primary: "Arial W01 Regular903292", helvetica, sans-serif;
    --font-family--primeBold: "Arial W01 Bold903304", helvetica, sans-serif;
    --font-family--secondary: "Metropolis", sans-serif;
    --font-size-md: 14px;
    --font-size-lg: 16px;
}


/* END VARIABLES */

/* TOOLS - GLOBAL
============================================================================ */

body {
    color: var(--color-grey--900);
    font-family: var(--font-family--primary);
    font-size: var(--font-size-md);                 /* Standard font size is -lg (16px) but dashboard real estate is limited */
    text-align: left;
}

label, .label, input[type="radio"], input[type="checkbox"], select {
    font-family: var(--font-family--secondary);
    letter-spacing: .25px;
}

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

/* 
        button, .btn, or .bttn = grey button - cancel, close or other second non-active ui choice
        button.primary-bttn or .btn.primary-bttn = red button - submit, go, or active ui choice 
        button.secondary-bttn or .btn.secondary-bttn = blue button - CTA 
*/

button, .btn, .bttn {                                 /* base button, grey w/white text - use for cancel, second/not-active choice button */
    background-color: var(--color-grey--800);         /* see .primary-btn, .secondary-btn classes below to mod */
    color: var(--color-white);
    font-family: var(--font-family--secondary);
    font-size: var(--font-size-md);                    /* normal font size for buttons is -lg, but tools dash has limited real estate so smaller font size */
    font-weight: 300;
    letter-spacing: .35px;
    text-align: center;
    vertical-align: middle;
    text-transform: none;
    text-decoration: none;
    border-radius: 4px;
    padding: 6px 10px;                                 /* normal padding for buttons is 10px 10px, but limited real estate so reducing top/bottom */
    line-height: 1.5;
    cursor: pointer;
    border: none;

}
button:hover, .btn:hover, .bttn:hover {
    background-color: var(--color-grey--700);
    color: var(--color-white);
}

button.primary-bttn, .btn.primary-bttn, .bttn.primary-bttn {                /* standard submit/go button */
    background-color: var(--color-primary);             /* <button class="primary-bttn" /> or <a href="#" class="btn primary-bttn" /> */
    color: var(--color-white);
}
button.primary-bttn:hover, .btn.primary-bttn:hover, .bttn.primary-bttn {
    background-color: var(--color-primary--dark);
}

button.secondary-bttn, .btn.secondary-bttn, .bttn.secondary-bttn {             /* cta buttons, blue bg w/white */
    background-color: var(--color-secondary);
    color: var(--color-white);
}
button.secondary-bttn, .btn.secondary-bttn, .bttn.secondary-btt {
    background-color: var(--color-secondary--dark);
}

button:disabled,
button[disabled] {
  cursor: not-allowed;
  background-color: var(--color-grey--700);
  opacity: .6;
}

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

/* There are 2 main types of links, in-line and block. In-line is used in a sentence such as in a paragraph of text.
Block links are stand-alone like buttons. The main difference is font-family, in-line uses Arial. You can turn a
link into a button by adding button classes: <a href="#" class="btn primary-bttn" />   */

a, .link {                                      /* stand-alone link, block style */
	background-color: transparent;
	font-family: var(--font-family--secondary);
	color: var(--color-secondary);
	font-weight: 500;
}

a.inline-link, .inline-link {                   /* inline link style */
    font-family: var(--font-family--primary);
    color: var(--color-secondary);
    font-weight: 300;
}

@keyframes link-fadeinout { 
    0%, 100% { 
        text-decoration-color: transparent; 
    } 
    50% { 
        text-decoration-color: var(--color-primary); 
    }
}

a:hover, .link:hover, .inline-link:hover {
    color: var(--color-black);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 2px;
    animation: link-fadeinout 1.5s linear forwards;
}

/* ============= Heads ================== */

h1, h2, h3, h4, h5, h6 {font-family: var(--font-family--secondary);}

h2, h3 {font-weight: 400;}

h4, h5, h6{font-weight: 500;}

h1 {
    font-size: 34px;
    font-weight: 300;
    color: var(--color-primary);
    letter-spacing: .75px;
    font-kerning: normal;
}

h2 {
    font-size:30px;
    color: var(--color-grey--800);
}

h3 {font-size:24px}
h4 {font-size:18px}
h5 {font-size: 16px;}
h6 {font-size: 12px;}

p {
    font-size: 16px;
    font-family: Arial W01 Regular903292,sans-serif;
    color: var(--color-grey--900);
    line-height: 1.42857143;
}

/* ============= Decorative Elements / Helpers ================== */

.divider {                                        /* dividing line between two link-bttns or buttons or whatever */
    position: relative;                           /* <div class="divider"></> */
    display: inline-block;
    background-color: var(--color-grey--900);
    width: 1px;
    height: 1.3em;
    margin-left:10px;
    margin-right:10px;
    margin-bottom: -6px;
}