@import "_reset.css";
@import "_centered.css";
@import "_default.css";
@import "_weather.css";
@import "_fancybox.css";

/******************/
/* THEME SETTINGS */
/******************/
:root {
    --content-width: 920px;

    --body-background-colour: #ffecd6;
    --body-text-colour: #1e1e24;

    --link-colour: #0a473e;
    --link-hover-colour: #148f7c;

    --image-padding-colour: #1e1e24;

    --body-background-image: unset;
    --body-background-size: unset;

    --link-text-decoration: none;
    --link-hover-text-decoration: underline;

    --body-font-stack: 18px / 30px "Andada Pro", serif;
    --header-font: "New Amsterdam", Helvetica, Arial, sans-serif;

    --weather-extremes-high-colour: #ff6978;
    --weather-extremes-low-colour: #81f4e1;

    @media (prefers-color-scheme: dark) {
        --body-background-colour: #1e1e24;
        --body-text-colour: #ffcf99;

        --link-colour: #6be9d6;
        --link-hover-colour: #95efe2;

        --image-padding-colour: #09090B;
    }
}

@font-face {
    font-family: "Andada Pro";
    src: url("../fonts/andada_pro.ttf") format("truetype");
    font-weight: 400 800;
}

@font-face {
    font-family: "Andada Pro";
    src: url("../fonts/andada_pro-italic.ttf") format("truetype");
    font-weight: 400 800;
    font-style: italic;

}

@font-face {
    font-family: "New Amsterdam";
    font-weight: 400;
    src: url("../fonts/new_amsterdam_regular.ttf");
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.4em;
}

strong {
    font-weight: 700;
}


/*******************/
/*** PAGE HEADER ***/
/*******************/
header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;

    padding-top: 0.1em;
    padding-bottom: 0.1em;
    margin-bottom: 0.5em;

    color: var(--body-background-colour);
    background-color: var(--body-text-colour);

    font-family: var(--header-font);

    a, a:hover {
        color: var(--body-background-colour);
        text-decoration: none;
    }
}

.header--logo-svg {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    font-size: 2.25em;

    svg {
        display: block;
        margin: 0 auto;
    }

    svg path {
        fill: var(--body-background-colour);
    }
}

.header--text {
    display: inline-block;
    font-size: 3em;
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

.section--no-breadcrumbs {
    margin-top: 1.5em;
}


/****************************/
/*** GENERIC STYLING BITS ***/
/****************************/
.form-control--input-box {
    font-family: var(--header-font);
    font-size: 1.25rem;
    border: none;
}

.button-primary {
    border: none;

    @media (prefers-color-scheme: light) {
        color: var(--body-background-colour);
        background-color: var(--body-text-colour);

        &:hover {
            background-color: var(--link-hover-colour);
        }

    }

    @media (prefers-color-scheme: dark) {
        color: var(--body-background-colour);
        background-color: var(--link-colour);

        &:hover {
            background-color: var(--link-hover-colour);
        }
    }
}

ul.breadcrumbs, ul.pagination, .media--links-to-memories-tags-search {
    font-family: var(--header-font);
    font-size: 150%;
}

.media--links-to-memories-tags-search {
    margin-top: 0;
}

ul.pagination {
    margin-top: 0.75em;
}

ul.breadcrumbs {
    margin-bottom: 0.75em;
}


/************************/
/*** UNORDERED LISTS ****/
/************************/
ul.breadcrumbs {
    & li {

        &:first-child {
            &:before {
                content: unset;
            }
        }

        &:before {
            content: '\2022\00A0';
        }

        &:after {
            content: unset;
        }
    }
}



/*************************/
/*** GLOBAL PAGINATION ***/
/*************************/
ul.pagination {
    & li.pagination---link-to-first-page {
        & a, & span {
            &:before {
                content: '\21A4\00A0';
            }
        }
    }

    & li.pagination---link-to-previous-page {
        & a, & span {
            &:before {
                content: '\21A4\00A0';
            }
        }
    }

    & li.pagination---link-to-next-page {
        & a, & span {
            &:after {
                content: '\00A0\21A6';
            }
        }
    }

    & li.pagination---link-to-last-page {
        text-align: right;

        & a, & span {
            &:after {
                content: '\00A0\21A6';
            }
        }
    }
}



/*********************/
/*** GENERIC POSTS ***/
/*********************/
h1#media-heading + .form {
    margin-top: 1.5em;
}

.media--links-to-memories-tags-search {
    & span {
        &:first-child {
            &::after {
                content: ' \2022';
            }
        }

        &:nth-child(2) {
            &::after {
                content: ' \2022';
            }
        }

        &:last-child {
            &::before {
                content: '\2022\00A0';
            }
        }
    }
}

.post--items {
    & audio {
        padding-top: 1em;
    }
}

.post--tag {
    border: unset;
    margin: 0.2em 0.1em;
    font-family: var(--header-font);
    color: var(--body-text-colour);
    background-color: color-mix(in oklab, var(--body-text-colour) 10%, transparent);

    &:hover {
        color: var(--body-background-colour);
        background-color: var(--link-hover-colour);
    }

    @media (prefers-color-scheme: dark) {
        background-color: var(--body-text-colour);
        color: var(--body-background-colour);

        &:hover {
            background-color: var(--link-colour);
        }
    }
}

.post--permalink {
    font-weight: 500;
}

.post--tag {
    font-size: 100%;
}

.post--icon {
    vertical-align: -0.2em;
}

.post--blog-post-link-icon {
    vertical-align: -0.1em;
}

.post--blog-post-comment-count-text {
    font-weight: 700;
}

.memories--year-heading {
    font-size: 175%;

    @media (prefers-color-scheme: dark) {
        color: var(--body-text-colour);
        background-color: var(--image-padding-colour);
    }

    @media (prefers-color-scheme: light) {
        color: var(--body-background-colour);
        background-color: var(--body-text-colour);
    }
}