/*Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Stylesheet import*/
@import 'utilities.css';
@import 'blocks/header.css';
@import 'blocks/footer.css';
@import 'blocks/buttons.css';
@import 'blocks/home.css';
@import 'blocks/cards.css';
@import 'exceptions.css';

:root {

    /* Colours */
    --primary-color: #c90450;
    --primary-color-dark: #6D002A;
    --primary-color-light: #E9558E;
    --secondary-color: #D63F09;
    --secondary-color-light: #DFA289;
    --white: #fff;
    --mid-grey: #757575;
    --dark-grey: #2D2D2D;
    --darkest-grey: #222222;
    --divider-color: #F2ECE9;
    --tertiary-color: #066a9f;

    --border-soft-gray: 1.5px solid rgb(223, 223, 223);
    --image-bg-gradient: linear-gradient(180deg, rgba(214, 63, 9, 0.30) 0%, rgba(201, 4, 80, 0.30) 100%);

    --padding-x-xl: 2rem;

    /* Filters to transform SVG colour when linked as <img> */
    --black-to-pink: invert(12%) sepia(94%) saturate(4905%) hue-rotate(329deg) brightness(83%) contrast(102%);
    /* #c90450 */
    --black-to-orange: invert(27%) sepia(100%) saturate(1206%) hue-rotate(352deg) brightness(101%) contrast(106%);
    /* #d63f09 */
    --black-to-white: invert(100%) sepia(0%) saturate(7500%) hue-rotate(345deg) brightness(106%) contrast(102%);
    /* #fff */
    --black-to-near-black: invert(10%) sepia(3%) saturate(6%) hue-rotate(332deg) brightness(102%) contrast(93%);
    /* #222 */
    --black-to-dark-grey: invert(11%) sepia(0%) saturate(1374%) hue-rotate(180deg) brightness(109%) contrast(85%);
    /* #2d2d2d */
    --black-to-mid-grey: invert(51%) sepia(0%) saturate(0%) hue-rotate(139deg) brightness(89%) contrast(82%);
    /* #9C9C9C */
    --black-to-blue: invert(17%) sepia(87%) saturate(4951%) hue-rotate(189deg) brightness(92%) contrast(95%);
    /* #066a9f */

    /* Media sizes */
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
}

* {
    font-family: "Roboto", sans-serif, "Helvetica Neue";
}

legend /*not sure what this does or where it's used*/ {
    padding: 0;
    display: table;
}

fieldset /*not sure what this does or where it's used*/ {
    border: 0;
    padding: 0.01em 0 0 0;
    margin: 0;
    min-width: 0;
}

html {
    /*
    This is for accessbility and to ensure root font size scales to smaller displays. I'm not sure how it works but it does
    More information here: https://www.freecodecamp.org/news/override-root-font-size-for-a-better-user-experience/
    */
    font-size: 100%;
}

body {
    line-height: 1.5;
    overflow-x: hidden;
    /*padding-bottom: 600px;*/
    padding: 0;
    margin: 0;
    background: #f7f2f1;
}

h1,
h2,
h3,
h4 {    
    line-height: 1.2;
    font-family: "Roboto Condensed";
    font-weight: 700;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 1.5rem;
}

h3, 
h4 {
    font-size: 1.25rem;
}

p {
    line-height: 1.5;
    font-size: 1rem;
}

ul li {
    line-height: 1.5;
    font-size: 1rem;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
}

a:hover {
    text-decoration: underline;
}

a[href]:where(
        /* Changes the colour of any http links which are also not TMP links */
         [href^="https://"]:not([href*="transgendermediaportal.org"], [href*="dev-transgendermediaportal.ssac.carleton.ca"]),
         [href^="http://"]:not([href*="transgendermediaportal.org"], [href*="dev-transgendermediaportal.ssac.carleton.ca"]),
         [href^="mailto"]
    ) {
    color: var(--tertiary-color);
}

input {
    all: unset;
}

table {
  border-collapse: collapse;
}

th {
  text-align: left;
}

/* :focus {
  outline: 2px dotted;
  outline-offset: 0.25rem;
}

:focus {
    border: 4px solid var(--tertiary-color);
} */

#ssPoweredBy /*I don't know what this does */ {
    width: 100%;
}