@import 'properties.css';
@import 'reset.css';

@font-face {
    font-family: "Work Sans";
    font-weight: 100 900;
    src: url("../fonts/WorkSans.woff2") format("woff2")
}

@font-face {
    font-family: "Work Sans";
    font-weight: 100 900;
    font-style: italic;
    src: url("../fonts/WorkSans-Italic.woff2") format("woff2")
}

/*
//// Base styles ////
*/

html {
}

body {
    background-color: var(--base-light);
    color: var(--base-dark);
    font-family: 'Work Sans', sans-serif;
    font-size: var(--text-0);
    line-height: var(--text-2);
}

/** Links **/
a {
    color: var(--accent-dark);
}

a:hover {
    text-decoration: underline solid;
}

/** Headings **/
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    margin-bottom: var(--space-1);
}

@media screen and (max-width: 30em) {
    h1, h2, h3, h4, h5, h6 {
      font-weight: 600;
      line-height: 1.2em;
    }
}

h1 {
    font-size: var(--text-4);
}

h2 {
    font-size: var(--text-3);
}

h3 {
    font-size: var(--text-2);
}

h4 {
    font-size: var(--text-1);
}

h5 {
    font-size: var(--text-0);
}

p {
    margin-bottom: var(--space-2);
}

/** Lists **/
.body-content ul {
    list-style-type: disc;
}

.body-content ol {
    list-style-type: decimal;
}

.body-content ul,
.body-content ol {
    padding-left: var(--space-2);
    margin-bottom: var(--space-2);
}

.body-content li {
    margin-bottom: var(--space--3);
}

/** Code blocks **/
code {
    font-family: monospace;
}

p > code,
li > code {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    border-radius: var(--space--6);
    padding: .1rem var(--space--5);
    background-color: var(--base-light-2);
}

article pre,
section pre {
    margin-bottom: var(--space-3);
    padding: var(--space-1);
    border-radius: var(--space--6);
}


/*
//// Utilities ////
*/

.visually-hidden {
    display: none;
}


/*
//// Site layout ////
*/

/* Everything between site header and site footer */

site-container {
    display: block;
    max-width: 90vw;
    margin-inline: auto;
}

@media screen and (min-width: 48em) {
    site-container {
    max-width: 70ch;
    }
}

/* Site header and nav */

.site-header {
    position: sticky;
    top: -2rem;
    padding-top: 2rem;
    background-color: hsla(var(--base-light-2-hsl) / 0.9);
    z-index: 1000;
}

.site-header_inner {
    position: sticky;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    top: 0;
    padding: var(--space--1) 0;
}

.site-title {
    align-self: center;
    margin-bottom: var(--space--5);
    text-align: center;
    font-size: var(--text-2);
    font-weight: 800;
}

.site-title_link {
    color: var(--accent-bright-1);
}

.site-nav {
    text-align: center;
}

.site-nav_inner {
    display: inline-grid;
    grid-template: 1fr / repeat(3, 1fr);
    column-gap: 0.5rem;
    margin-top: 0.5rem;
}

.site-nav_tab a {
    display: block;
    padding: var(--space--5) var(--space-1);
    border-radius: calc(var(--text-4) / 2);
    line-height: var(--text-0);
    font-size: var(--text--2);
    font-weight: 500;
    text-align: center;
    background-color: hsla(var(--base-light-hsl) / 0.8);
}

.site-nav_tab a:hover {
    text-decoration: none;
    background-color: var(--base-light--1);
}

.site-nav_tab.-selected a {
    background-color: var(--base-light--2);
    color: var(--accent-bright-1);
}

/* Larger viewports */
@media screen and (min-width: 70ch) {
    .site-header {
        top: -3.75rem;
        padding-top: 3.75rem;
    }
    .site-header_inner {
        flex-flow: row nowrap;
    }

    .site-title {
        margin: 0;
    }

    .site-nav_inner {
        margin-top: 0;
    }
}


/** --- Site body section --- **/
.site-body {
}

/* Main content area insite the site body */

.site-body_content {
    padding: var(--space-4) 0 var(--space-6);
}

/** --- Site footer --- **/
.site-footer {
    position: sticky;
    top: 100vh;
    background-color: var(--base-light--1);
    padding: var(--space-2) 0 var(--space-3) 0;
}

.site-footer_inner {
}

.site-footer_items {
    display: grid;
    grid-template: 1fr 1fr / repeat(3, 1fr);
    column-gap: 1rem;
}

.site-footer_item {
    text-align: center;
    font-size: var(--text--2);
}

.site-footer_item.-copyright {
    grid-column: 1 / span 3;
    padding-top: var(--space--2);
    white-space: nowrap;
    color: var(--accent-bright-1);
}

/* Larger viewports */
@media screen and (min-width: 50ch) {
    .site-footer_items {
        grid-template: 1fr / repeat(3, min-content) auto;
    }
    
    .site-footer_item {
    }
    
    .site-footer_item.-copyright {
        grid-column: 4 / 4;
        justify-self: end;
        padding-top: 0;
    }    
}

/*
//// Components ////
*/

/** Buttons **/
.button {
    display: inline-block;
    position: relative;
    width: auto;
    padding: var(--space--4) var(--space--1);
    border-radius: var(--space--4);
    background-color: hsl(var(--accent-dark-hsl) / 0.75);
    color: var(--base-light--1);
}

.button:hover {
    background-color: var(--accent-dark);
}

.button.-small {
    padding: 0 var(--space--1);
    border-radius: var(--space-1);
    font-size: var(--text--1);
}

.button.-small.-icon-left {
    padding-left: var(--space-3);
}

.button.-secondary {
    /*border: 1px solid var(--base-light-3);*/
    background-color: var(--base-light-1);
    color: var(--accent-dark);
}

.button.-secondary:hover {
    background-color: var(--base-light--1);
}

.-back::before {
    content: '\21D0';
    position: absolute;
    left: var(--space--2);
}

.continue-link {
    display: inline-block;
    margin: 0 auto;
    text-transform: uppercase;
    font-size: var(--text--1);
    font-weight: 600;
}

/** Titles **/
.page-title {
    margin-bottom: var(--space-4);
}

/** Quotes and endorsements **/
.quote,
.endorsement {
    position: relative;
    padding-top: var(--space-1);
}

.quote::before,
.endorsement::before {
    content: '\00201c';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    font-size: 1500%;
    line-height: 0.8em;
    color: hsl(var(--accent-bright-hsl) / 0.20);
}

.quote-content,
.endorsement-content {
    margin: 0 var(--space-6);
    text-wrap: pretty;
}

.quote-attribution,
.endorsement-attribution {
    font-style: italic;
    font-size: var(--text--1);
}

/* Quote styles */
.quote {
    margin-bottom: var(--space-3);
}

.quote-content {
    font-weight: 700;
}

.quote-attribution {
    margin: var(--space--1) var(--space-6) var(--space--2);
    text-align: right;
}

.quote-attribution::before {
    content: '\00007e';
    margin-right: var(--space--3);
}

/* Endorsements styles */
.endorsement-card {
    content: "";
    display: block;
    margin-bottom: var(--space-2);
}

.endorsement-card::after {
    content: "";
    display: block;
    margin: 0 auto;
    width: 50%;
    height: 3px;
    border-radius: 1.5px;
    background: var(--base-light-3);
}

.endorsement-card:last-child::after {
}

.endorsement-content {
    font-weight: 600;
}

.endorsement-attribution {
    margin-top: var(--space-1);
    text-align: center;
}

/*
//// Site section styles ////
*/

.page-header {

}

/*
//// Posts styles ////
*/

/** Shared styles **/
.post-title {
    margin: var(--space-2) 0 0;
}

.post-date {
    display: inline-block;
    font-size: var(--text--1);
    margin-bottom: var(--space--4);
}

/** Posts lists **/
.posts-list li {
    list-style-type: none;
}

.posts-list_footer {
    margin: calc(0vw - var(--space--1)) 0 var(--space-5);
    text-align: center;
    position: relative;
}

.posts-list_footer::before,
.posts-list_footer::after {
    content: '';
    display: block;
    position: absolute;
    width: 42%;
    height: 3px;
    top: 50%;
    border-radius: 1.5px;
    background-color: var(--base-light-3);
}

.posts-list_footer::after {
    right: 0;
}

/** Card **/
.post-card {
    padding: 0 var(--space--4);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--base-light-3);
}

.post-card:last-child {
    border: none;
}

.post-card_title {
    font-size: var(--text-1);
    font-weight: 500;
}

.post-blurb {
    text-wrap: pretty;
}

/** Post page **/
.post-header_title {
    margin: var(--space-2) 0 var(--space--2);
}

.post-header_date {
    display: inline-block;
    font-size: var(--text--1);
    margin-bottom: var(--space--4);
}

.post-body {
    padding-top: var(--space-1);
}