/* feel like I am way ahead of what we are learning right now but I got a little
carried away with CSS and wanted to make something that was cool with my time */

:root {
    /* i put this here to tell browsers that it is a "dark theme" page */
    color-scheme: dark;
    accent-color: var(--accent-color);
    /* set these up for future-proofing, if i need to change them */
    --background-color: #18101e;
    --quote-color: orange;
    --accent-color: violet;
    --text-color: lightblue;
    --functional-color: lightgreen;
    --functional-color-active: palegoldenrod;
    --functional-color-transitioning: yellowgreen;

    --h1-font-size: 30px;
    --h2-font-size: 25px;
    --body-font-size: 20px;
    --small-font-size: 16px;
}

* {
    color: var(--text-color);
    /* Josefin Sans is external font here. plenty of alternatives if the font doesn't load. */
    --regular-font: 'Josefin Sans', Verdana, Geneva, Tahoma, sans-serif;
    --monospace-font: 'Cousine', 'Liberation Mono', 'Courier New', Courier, monospace;
    font-family: var(--regular-font);
    font-size: var(--body-font-size);
    line-height: 1.5;
}

body {
    max-width: 800px; /* wanted to keep it consistent with the banner width */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--background-color);
}

/* To visually hide the link */
.visually-hidden {
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
/* To make skip links visible on focus */
.visually-hidden:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: absolute;
  width: auto;
  /* Adjust the remaining properties to match design */
  /*outline: none; I overrode this line because it hides the focus ring, which can be a concern for accessibility. */
  top: 1em;
  left: 1em;
  font-size: var(--body-font-size);
  color: white;
  background: color-mix(in srgb, transparent, grey 50%);
  padding: .5em;
  border-radius: .5em;
}

/* for list items */
::marker {
    color: var(--accent-color);
}

h1, h2, code, pre {
    font-family: var(--monospace-font);
}
h1 {
    color: var(--accent-color);
    font-size: var(--h1-font-size);
}
h2 {
    font-size: var(--h2-font-size);
}

.banner {
    display: block;
    margin: auto;
    width: 100%;
}

/* as suggested by Google's accessibility audit */
.breadcrumb {
    display: flex;
    list-style: none;
    padding: 0;
}
/* nautical star, representing navigation or 'true north' :) */
.breadcrumb::before {
    content: "\272f\a0" / "";
}
/* ::has(a) selector is fairly new, but is baseline 2023.
to be safe, i used :not(:last-child) which is newer, therefore having better browser support */
.breadcrumb > li:not(:last-child)::after {
    content: " \203a\a0" / "";
}

small, small *,
caption, caption *,
figcaption, figcaption *,
.attribution, .attribution *,
.copyright, .copyright * {
    font-size: var(--small-font-size);
}

.copyright, .copyright * {
    color: color-mix(in srgb, transparent, var(--text-color) 60%);
    text-align: center;
}

blockquote {
    text-align: center;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
/* found this neat trick from https://webweekly.email/archive/web-weekly-174/ */
/* content: open-quote/close-quote were from the article, color and font-size were added by me */
blockquote > q::before, blockquote > q::after {
    color: var(--quote-color);
    font-size: 2em;
}
blockquote > q::before {
    content: open-quote;
}
blockquote > q::after {
    content: close-quote;
}
blockquote > q {
    background-color: color-mix(in srgb, transparent, var(--quote-color) 10%);
    border-radius: .5em;
    padding: 0.25em;
}

.header-image {
    container-type: inline-size;
    aspect-ratio: 16 / 9;
    border-radius: 1.8% / 3.2%;
    width: 100%;
    height: 100%;
    background-image: var(--header-image-16-9);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.header-image h1 {
    font-size: clamp(1rem, 10cqw, 3rem);
    text-wrap: wrap;
      text-shadow:
    1px 1px 2px black,
    0 0 1em black,
    0 0 0.2em black,
    0 0 1em black,
    0 0 0.2em black;
}
.ratio-16-9 {
    aspect-ratio: 16 / 9;
    border-radius: 1.8% / 3.2%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.full-size-image {
    border-radius: .5em;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* For screen readers. Often times, if you want to use an acronym that is meant to be an acronym,
such as COSMIC, it will read out every letter like C-O-S-M-I-C, which is not ideal and may be annoying.
As such, this solution makes all <abbr> tags have an uppercase transform. */
abbr {
    text-transform: uppercase;
}

/* felt like this was missing, so wanted to put it here */
.projects > dt::before {
    content: "\27a4  " / "";
    color: var(--accent-color);
}

thead > tr {
    background: color-mix(in srgb, transparent, var(--accent-color) 20%);
}
tbody > tr:nth-child(odd) {
    background: color-mix(in srgb, transparent, var(--text-color) 5%);
}
tbody > tr:nth-child(even) {
    background: color-mix(in srgb, transparent, var(--text-color) 10%);
}
th, td {
    padding: .5em;
}

.form-title {
    color: var(--functional-color);
}
form {
    border-style: dashed;
    background: color-mix(in srgb, transparent, var(--functional-color) 10%);
    border-color: var(--functional-color);
    border-radius: 1em;
    padding: 1em;
    text-align: center;
}
select {
    color: revert;
}
button {
    /*border-radius: 0px;*/
    border: none;
    color: var(--functional-color);
    background: color-mix(in srgb, transparent, var(--functional-color) 20%);
    padding: .5em;
    border-radius: .5em;
}
button:hover, button:focus {
    color: var(--functional-color-transitioning);
    background: color-mix(in srgb, transparent, var(--functional-color-transitioning) 20%);
}
button:active {
    color: var(--functional-color-active);
    background: color-mix(in srgb, transparent, var(--functional-color-active) 20%);
}

/* gives a little visual hint that the field is required (wish you could do a tooltip natively in CSS like `title`) */
.required::after {
    content: " *";
    color: red;
}

/* nice use for accent colors */
a {
    color: var(--functional-color);
}
a:visited {
    color: var(--functional-color-active);
}
a:hover, a:focus {
    color: var(--functional-color-transitioning);
}


/* pasted from Google material icon styles */
.icon::before {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    /*font-size: 24px;*/
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    /*display: inline-block;*/
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;

    vertical-align: -.14em; /* this aligns the icon with the center of the text, not perfect but good enough */
}

/* as suggested by Google's accessibility audit */
.social-list {
    display: flex;
    list-style: none;
    padding: 0;
    /*flex-direction: column;*/
    /* cool new flex gap style rule! no need for margins! */
    row-gap: 1em;
    column-gap: .5em;
    flex-wrap: wrap; /* Required for multiple rows */
    justify-content: center;
    align-items: center;
}
.social-list-cta-header {
    text-align: center;
}
.social-btn {
    padding: .5em;
    border-radius: .5em;
    text-decoration: none; /* remove link underline */
    color: var(--text-color);
    background: linear-gradient(90deg,
        color-mix(in srgb, transparent, var(--brand-color-1) 40%),
        color-mix(in srgb, transparent, var(--brand-color-2) 40%)
    );
}
.social-btn:hover, .social-btn:visited {
    color: var(--text-color);
}
.social-btn:hover {
    background: linear-gradient(90deg,
        color-mix(in srgb, transparent, var(--brand-color-1) 75%),
        color-mix(in srgb, transparent, var(--brand-color-2) 75%)
    );
}
/* css variables are sooo fun */
.social-btn.facebook {
    --brand-color-1: #46a8ff;
    --brand-color-2: #0866ff;
}
.social-btn.instagram {
    --brand-color-1: #cc4a00;
    --brand-color-2: #a9009e;
}
.social-btn.reddit {
    --brand-color-1: #ff4500;
    --brand-color-2: #ae2c00;
}

/* I just learned this neat trick: alt text for ::before and ::after pseudo-classes.
 * I think this is the best way to do it, because having screen readers read aloud "facebook Facebook" or "camera Instagram" would be very annoying.
 * The "" implies blank alt text to screen readers, as the icon is purely decorative, already covered by the text on the link. */
.social-btn.facebook::before {
    content: "facebook " / "";
}
.social-btn.instagram::before {
    content: "camera " / "";
}
.social-btn.reddit::before {
    content: "reddit " / "";
}


/* Hide the navigation and share links when printing */
@media print {
    .breadcrumb {
        display: none;
    }
    .social-list {
        display: none;
    }
}



/* Responsive web design */
@media screen and (min-width: 992px) {
    /* Set font sizes */
    :root {
        --h1-font-size: 42px;
        --h2-font-size: 36px;
        --body-font-size: 24px;
    }
}
@media screen and not (min-width: 768px) {
    .header-image {
        background-image: var(--header-image-1-1);
        aspect-ratio: 1;
        border-radius: 3.2%;
    }
}
/* ironically, 500px is the lowest you can scale a window down to in firefox on (at least on Linux),
so when I scale down the window to the minimum I can, so if I set `max-width` to exactly to 500px,
the image gets hidden and I can see it working.

`max-width` makes this work, but the assignment specifically says when it is *less* than 500px,
so i used `not min-width` instead */
@media screen and not (min-width: 500px) {
    .header-image {
        background-image: none;
        aspect-ratio: revert;
    }
    .header-image-credit {
        display: none;
    }
}
@media screen and not (min-width: 300px) {
    /*.social-list {
        flex-direction: row;
    }*/
    .social-btn {
        display: block;
        height: 1rem;
        width: 1rem;
        font-size: 0px;
        padding: 10px;
        border-radius: .5rem;
    }
    .social-btn::before {
        font-size: 1rem;
    }
}

figure {
    margin: 0;
}

.article-list {
    padding: 0;
    list-style-position: inside;
}
.article-list h2 {
    display: inline;
}
.article-list li::marker {
    font-size: var(--h2-font-size);
}

code {
    background-color: #0000007f;
}

.code-block {
    border-radius: .5em;
    padding: .5em;
    background-color: #0000007f;
    text-wrap: wrap;
}
.code-block > code {
    background-color: revert;
}