/* global style goes here */
@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');

:root {

    --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 */

}

* {
    font-family: "Roboto", sans-serif, "Helvetica Neue";
    /*   transition: all 250ms;*/
}

legend {
    padding: 0;
    display: table;
}

fieldset {
    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%;
}

.svg-white {
    filter: var(--black-to-white);
}

.svg-pink

/* #c90450 */
    {
    filter: var(--black-to-pink);
}

.svg-orange

/* #d63f09 */
    {
    filter: var(--black-to-orange);
}

.svg-near-black

/* #222 */
    {
    filter: var(--black-to-near-black);
}

.svg-dark-grey

/* #2d2d2d */
    {
    filter: var(--black-to-dark-grey);
}

.svg-mid-grey

/* #9c9c9c */
    {
    filter: var(--black-to-mid-grey);
}

.svg-blue

/* #066a9f */
    {
    filter: var(--black-to-blue);
}

h1,
h2,
h3 {
    font-family: "Roboto Condensed", sans-serif, "Helvetica Neue Condensed";
    margin: 0;
    font-weight: 700;
    font-style: normal;
    line-height: normal;
}

html {}

body {
    padding: 0;
    margin: 0;
    background: #f7f2f1;
}

h1 {
    font-size: 3.875rem;
}

h2 {
    font-size: 1.875rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    margin: 0;
    font-size: 1.5em;
    font-family: "Roboto Condensed";
    line-height: normal;
    font-weight: 400;
}

p {
    margin: 0;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #222;
    font-size: 1.25rem;
}

p.large {
    font-size: 1.5rem;
}

p.small {
    font-size: 1.125rem;
    line-height: normal;
}

p.xsmall {
    font-size: 1rem;
    line-height: normal;
}

.bold {
    font-weight: 700;
}

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

a:hover {
    text-decoration: underline;
}

ul,
ul li,
ul ul li {
    margin: 0;
    padding: 0;
    text-indent: 0;
    list-style-type: none;
}

button {
    border: 0;
    padding: 0;
    background: none;
    background: transparent;
    border: none;
    cursor: pointer;
}

input {
    all: unset;
}

.primary-btn {
    background-color: var(--primary-color);
    color: var(--white) !important;
    text-decoration: none !important;
    border-radius: 25px;
    border: 2px solid var(--primary-color);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    padding: 0.75rem 1rem;
    transition: all linear 0.1s;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    font-size: 1.125rem;
    cursor: pointer;
    width: fit-content;
}

.primary-btn.small,
.secondary-btn.small {
    font-size: 0.9rem;
}

.primary-btn:hover {
    background-color: var(--primary-color);
    color: var(--white) !important;
    text-decoration: none !important;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

.primary-btn:focus {
    border: 4px solid var(--tertiary-color);
}

.primary-btn:active {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25) inset;
    background-color: var(--primary-color-dark);
    color: var(--white);
    border: 2px solid var(--primary-color-dark);
}

.primary-btn .icon {
    margin-left: 0.5rem;
}

.secondary-btn {
    background-color: var(--white);
    color: var(--primary-color) !important;
    text-decoration: none !important;
    border: 2px solid var(--primary-color);
    border-radius: 25px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    padding: 0.75rem 1rem;
    transition: all linear 0.1s;
    font-weight: 700;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    font-size: 1.125rem;
    cursor: pointer;
    width: fit-content;
}

.secondary-btn:hover {
    background-color: var(--white);
    color: var(--primary-color) !important;
    text-decoration: none !important;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

.secondary-btn:focus {
    border: 4px solid var(--tertiary-color);
}

.secondary-btn:active {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25) inset;
    background-color: var(--white);
    color: var(--primary-color-dark) !important;
    text-decoration: none !important;
    border: 2px solid var(--primary-color-dark);
}

.secondary-btn .icon {
    margin-left: 0.5rem;
}

/* external link color */
/* version 1 */
/*a[href]:not(:where(

        /* exclude hash only links */
/*         [href^="#"],
        /* exclude relative but not double slash only links */
/*         [href^="/"]:not([href^="//"]),
        /* domains to exclude */
/*         [href*="//transgendermediaportal.org"], [href*="//dev-transgendermediaportal.ssac.carleton.ca"],
    )) {
    color: var(--tertiary-color);
}

/* version 2, to catch internal links without single slash */
a[href]:where(
        /* 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);
}

/* from Figma */

.hero-image {
    height: 600px;
    width: 1920px;
    opacity: 50%;
    background: #000000;
}

/* breadcrumbs */

.breadcrumbs {
    display: flex;
    padding: 0.625rem 1.5rem 1.5rem 0.625rem;
    justify-content: flex-end;
    align-items: right;
    gap: 0.625rem;
}

.breadcrumbs p {
    font-weight: 700;
    margin: 0;
}

/* box's shadow -- KC: are these styles being used anywhere? */
div.static {
    background: #ffffff;
    box-shadow: 0px 2px 10px rgba(156, 156, 156, 0.302);
}

h1.static {
    text-align: center;
    font-size: 3.875rem;
    line-height: normal;
    color: #ffffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

h2.static {
    font-size: 1.875rem;
    line-height: normal;
}

h3.static {
    font-size: 1.5rem;
    line-height: 120%;
    color: #D63F09;
}

h4.static {
    font-size: 1.5em;
    line-height: 120%;
    font-weight: 700;
}

p.subtitle.static {
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

p.static {
    font-family: "Roboto";
    font-size: 24px;
    line-height: 36px;
    color: #222222;
}

p.caption {
    font-family: "Roboto Mono";
    font-weight: 400;
    font-size: 21px;
    line-height: 28px;
    color: #222222;
}

p.blockquote.static {
    font-family: "Roboto";
    font-style: italic;
    font-weight: 400;
    color: #918784;
    text-indent: 25px;
    border-left-style: solid;
    border-width: 2px;
    border-color: #d63f09;
}

/* .blockcite and .blockquote need to be nested together 
 so the left border doesn't break between them */
p.blockcite.static {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
    color: #341e16;
}

/* end figma paste */

#featured {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#featured img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
}

#featured section {
    width: min(90%, 480px);
    margin-left: 30%;
    margin-right: 10%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 1rem;
    z-index: 10;
}

#featured section h1,
#featured section h2,
#featured section h3 {
    width: 100%;
    text-align: left;
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

#featured section p {
    font-family: "Roboto";
    text-align: left;
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

#featured span.preh1 {
    font-size: 24px;
}

#featured section .primary-btn {
    align-self: flex-end;
}

@media screen and (max-width: 601px) {

    #featured section {
        position: absolute;
        width: min(90%, 480px);
        margin-left: 0;
        margin-right: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 10px;
    }
}

#ssPoweredBy {
    width: 100%;
}

/* end special CSS */

section.cta {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

section.cta p {
    font-family: "Roboto Condensed";
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    line-height: normal;
}

.cta-buttons {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

section#filmmaker-highlights,
section#decades,
section#genres {
    margin: 0 0 1.5rem;
}

@media screen and (min-width: 601px) {

    section#filmmaker-highlights,
    section#decades,
    section#genres {
        margin: 0 1.5rem 2rem;
    }
}

.card {
    filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.25));
    background-color: #fff;
    border-radius: 10px;
}

.card .card-header {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--divider-color);
    padding: 1.125rem;
}

.card-header h2 {
    margin-block: 0;
}

.card div.card-main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.5rem;
    padding: 1.5rem;
}

.card-main a.mainpage-thumbnail {
    position: relative;
    height: 180px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
    padding: 1.5rem 1rem 1rem 1rem;
}

.card-main a.mainpage-thumbnail img {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 250ms ease-in-out;
}

.card-main a.mainpage-thumbnail:hover img {
    transform: scale(1.1);
}

.card-main a.mainpage-thumbnail .overlay {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.card-main a.mainpage-thumbnail p {
    color: #fff;
    font-weight: 700;
    z-index: 11;
    font-family: "Roboto Condensed";
    font-size: 1.5rem;
    line-height: 120%;
    text-shadow: 0px 4px 5px #000;
    text-align: center;
}

.card-main a.mainpage-thumbnail:hover p {
    color: #fff;
    font-weight: 700;
}

.card-main .card-container a.card-caption {
    display: block;
    background-color: var(--darkest-grey);
    padding: .25rem 0.5rem 0.5rem 0.5rem;
    text-align: right;
    font-size: 0.8rem;
    color: #fff;
    text-decoration: underline;
    font-style: italic;
}

.card-main .card-container a.card-caption:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

div.card-button {
    align-self: center;
    justify-self: center;
}

@media screen and (min-width: 601px) {
    .card {
        border-radius: 10px;
    }

    .card .card-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

@media (min-width: 601px) {
    nav {}

    #main-menu .masthead .search {}
}

.invisible {
    visibility: hidden;
}

button.content-collapse-button {
    transition: transform 250ms linear;
}

button.content-collapse-button > img {
    width: 1rem;
    height: 1rem;
}

button.content-collapse-button.down {
    transform: rotate(180deg);
}

.collapsible-content {
    transition: max-height 500ms cubic-bezier(0, 1, 0, 1);
    max-height: 0;
    overflow: hidden;
}

.collapsible-content.expanded {
    max-height: 10000px;
    transition: max-height 750ms ease-in-out;
    overflow-y: auto;
}

#skip-to-content {
    display: block;
    position: absolute;
    top: 2rem;
    left: 2rem;
    background-color: #fff;
    padding: 1rem;
    transform: translateY(-100vh);
    transition: transform 0.25s ease-in;
    z-index: 100;
    font-size: 1.2rem;
}

#skip-to-content:focus {
    transform: translateY(0);
}

/* social media icons on node pages*/
img.social-media-icon {
    height: 1rem;
    margin-right: 0.625rem;
}

.learn-more .help-icon img {
    height: 0.9rem;
    width: 0.9rem;
    margin-right: 0.125rem;
    filter: var(--black-to-pink);
}

a.learn-more {
    font-size: 1rem;
}

.learn-search {
    padding: 1rem 0rem;
}

div.learn-media {
    width: 100%;
}