/**
    1.00 - CSS variables.
 */
:root {
    /* reference only - does not alter media queries - minimum values */
    --screen-sm: 0px;
    --screen-md: 688px;
    --screen-lg: 1248px;
    /* end media sizes */


    /* START EDITS */
    --max-width: 940px;
    --margin: 20px;
    --padding: 20px;

    /* fonts and text */
    --font-family: Lato, sans-serif;
    --font-family-h: Merriweather, serif;

    --font-size: 13px;
    --font-size-h1: 38px;
    --font-size-h2: 26px;
    --font-size-h3: 22px;
    --font-size-h4: 18px;
    --font-size-h5: 16px;
    --font-size-h6: 12px;

    --line-height: 1.5;
    --line-height-h: 1.1;

    --font-style: normal;
    --font-variant: normal;
    --text-align: left;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --font-weight: 400;
    --font-weight-h: 400;

    /* colors */
    --black: #000000;
    --white: #ffffff;
    --error: #b41717;
    --gray-dark: #333333;
    --gray-medium: #666666;
    --gray-light: #b5b5b5;

    /* universal color naming */
    --color-alpha: #a99231;
    --color-bravo: #e8c308;
    --color-charlie: #444444;
    --color-delta: #eeeeee;

    --color-bg: var(--white);
    --color-text: var(--black);

    /* buttons and links */
    --color-link: var(--color-alpha);
    --button-bg: var(--white);
    --color-link-hover: var(--color-charlie);
    --button-bg-hover: var(--color-alpha);
    --letter-spacing: 1px;
    --link-underline: none;

    /* border */
    --color-border: var(--color-alpha);
    --border-radius: 3px;
    /* END EDITS */
}


/**
    1.01 - Style framework. Authorized changes only! It's likely you are in the wrong section.

    1.10 - html basics
    1.11 - positioning
    1.12 - typography
    1.13 - coloring
    1.14 - links and buttons
    1.15 - images and embeds
    1.16 - form items

    1.60 - flex layout
    1.70 - grid layout

    1.80 - visibility
    1.90 - magic classes
 */


/* 1.10 - html basics */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}
body {
    container-type: inline-size;
}
*,
:after,
:before {
    box-sizing: border-box;
}


/* 1.11 - positioning */
body,
header,
main,
footer,
article,
section,
div,
ol,
ul {
    margin: 0;
    padding: 0;
    text-align: var(--text-align);
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p,
li {
    margin: 0 0 calc(var(--font-size) * var(--line-height)) 0;
}
h1:last-child, .h1:last-child,
h2:last-child, .h2:last-child,
h3:last-child, .h3:last-child,
h4:last-child, .h4:last-child,
h5:last-child, .h5:last-child,
h6:last-child, .h6:last-child,
p:last-child,
li:last-child {
    margin: 0 0 0 0;
}

ul {
    list-style-type: circle;
    margin-left: 1lh;
}


/* 1.12 - typography */
* {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-style: var(--font-style);
    font-variant: var(--font-variant);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
}
b, strong {
    --font-weight: var(--weight-bold);
}
em, i {
    --font-variant: italic;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    --font-family: var(--font-family-h);
    --font-weight: var(--font-weight-h);
    --line-height: var(--line-height-h);
    letter-spacing: var(--letter-spacing);
}
h1, .h1 {
    --font-size: var(--font-size-h1);
}
h2, .h2 {
    --font-size: var(--font-size-h2);
}
h3, .h3 {
    --font-size: var(--font-size-h3);
}
h4, .h4 {
    --font-size: var(--font-size-h4);
}
h5, .h5 {
    --font-size: var(--font-size-h5);
}
h6, .h6 {
    --font-size: var(--font-size-h6);
}

/* 1.13 - coloring */
* {
    color: var(--color-text);
}
body {
    background: var(--color-bg);
}


/* 1.14 - links and buttons */
a,
.link {
    --color-text: var(--color-link);
    cursor: pointer;
    text-decoration: var(--link-underline);
    transition: background 400ms ease, color 200ms ease;
}
a * {
    transition: background 400ms ease, color 200ms ease;
}
h1 > a,
h2 > a,
h3 > a,
h4 > a,
h5 > a,
h6 > a {
    text-decoration: var(--link-underline);
}
button,
.wp-block-button > *,
input[type='submit'] {
    background: var(--button-bg);
    border: 1px solid var(--color-link);
    border-radius: var(--border-radius);
    color: var(--color-link);
    cursor: pointer;
    display: inline-block;
    letter-spacing: var(--letter-spacing);
    margin: 0.5em 0;
    padding: 5px max(1em, calc(var(--border-radius) + 7px));
    text-align: center;
    vertical-align: middle;
}
@media (hover: hover) {
    a:hover,
    .link:hover {
        color: var(--color-link-hover);
    }
    button:hover,
    .wp-block-button > *:hover,
    input[type='submit']:hover {
        --color-bg: var(--button-hover-bg);
        border-color: var(--color-link-hover);
        color: var(--color-link-hover);
    }
}


/* 1.15 - images */
img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
svg {
    height: 100%;
    vertical-align: middle;
    width: auto;
}
iframe[src*=youtube] {
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}


/* 1.16 - form items */
label {
    display: block;
    font-weight: var(--weight-bold);
    padding-bottom: 4px;
}
input,
select,
textarea {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    outline: none;
    padding: calc(var(--border-radius) + 7px);
    width: 100%;
}
input:focus,
select:focus,
textarea:focus {
    outline: var(--color-link-hover) solid thin;
}
input[type=checkbox] {
    --size: 1.4em;
    border: 1px solid var(--color-text);
    height: var(--size);
    margin: 0;
    width: var(--size);
}


/* 1.60 - flex layout */
/* flex is meant for fixed width blocks, not column layouts (which are grid) */
.flex {
    --alignment-horizontal: stretch;
    --alignment-vertical: stretch;
    --flex-grow: 0;
    --gap: var(--margin);
    align-items: var(--alignment-vertical);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap) var(--gap);
    justify-content: var(--alignment-horizontal);
    width: 100%;
}
.flex .flex-item {
    align-self: var(--alignment-vertical);
    flex: var(--flex-grow) 1 var(--flex-basis, calc(var(--max-width) / 3));
}
.flex .flex-item.fit-content {
    --flex-basis: fit-content;
}


/* 1.70 - grid layout */
/* grids are based on the number of columns at responsive widths */
.grid {
    --alignment-horizontal: stretch;
    --alignment-vertical: stretch;
    --gap: var(--margin);
    --grid-columns-sm: 1;
    --grid-columns-md: 1;
    --grid-columns-lg: 1;
    align-items: var(--alignment-vertical);
    display: grid;
    gap: var(--gap) var(--gap);
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    justify-items: var(--alignment-horizontal);
}
@media (min-width: 0px) and (max-width: 687px) {
    .grid {
        --grid-columns: var(--grid-columns-sm);
    }
}
@media (min-width: 688px) and (max-width: 1247px) {
    .grid {
        --grid-columns: var(--grid-columns-md);
    }
}
@media (min-width: 1248px) {
    .grid {
        --grid-columns: var(--grid-columns-lg);
    }
}

.grid .grid-item {
    align-self: var(--alignment-vertical);
    justify-self: var(--alignment-horizontal);
}


/* 1.80 - visibility */
/* visible unless hidden all or per size */
.hidden {
    display: none;
}
@media (min-width: 0px) and (max-width: 687px) {
    .hidden-sm {
        display: none;
    }
}
@media (min-width: 688px) and (max-width: 1247px) {
    .hidden-md {
        display: none;
    }
}
@media (min-width: 1248px) {
    .hidden-lg {
        display: none;
    }
}
.show {
    display: revert;
}


/* 1.90 - magic classes */
.has-bg-alpha {
    background: var(--color-alpha);
}
.has-bg-bravo {
    background: var(--color-bravo);
}
.has-bg-charlie {
    background: var(--color-charlie);
}
.has-bg-delta {
    background: var(--color-delta);
}

.has-border {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.has-h-pad {
    padding: calc(2 * var(--margin)) 0;
}
.has-padding-h {
    padding-left: calc(1.5 * var(--margin));
    padding-right: calc(1.5 * var(--margin));
}
.has-padding-v {
    padding-bottom: calc(2 * var(--margin));
    padding-top: calc(2 * var(--margin));
}
.has-max-width {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: var(--max-width);
}

.has-text-center {
    text-align: center !important;
}
.has-text-left {
    text-align: left !important;
}
.has-text-right {
    text-align: right !important;
}
.has-text-alpha {
    --color-text: var(--color-alpha);
}
.has-text-bravo {
    --color-text: var(--color-bravo);
}
.has-text-charlie {
    --color-text: var(--color-charlie);
}
.has-text-delta {
    --color-text: var(--color-delta);
}

.has-sticky {
    position: sticky;
    top: 0;
    z-index: 1999;
}