/*
Theme Name: Rhys Wynne - 2025
Theme URI: http://www.rhyswynne.co.uk/
Description: Theme for Rhys Wynne 2025
Version: 1.1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Author: Rhys Wynne
Author URI: http://www.rhyswynne.co.uk/
Template: twentyfifteen
Tags:
*/

/* 
    --wp--preset--color--base: #ffffff;
    --wp--preset--color--text: #364954;
    --wp--preset--color--secondary-text: #9aaebb;
    --wp--preset--color--secondary-link: #d8a2c9;
    --wp--preset--color--primary-link: #a16d93;
    --wp--preset--color--background: #71bbe2;
    --wp--preset--color--tertiary-link: #047166;
*/

:root {
    --rw--font-family-main: "Montserrat", sans-serif;
    --rw--font-family-header: "Press Start 2P", sans-serif;
    --rw--largest-breakpoint: 59.6875em;
    --rw--tablet-breakpoint: 38.75em;
}

.site-footer {
    background-color: #000;
    color: var( --wp--preset--color--base );
}

body {
    background-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--text);
}

.entry-content a,
.comments-area a,
.post-navigation a {
    color: var(--wp--preset--color--primary-link);
    border-bottom-color: var(--wp--preset--color--secondary-link);
}

.entry-content a:hover,
.entry-content a:focus,
.entry-content a:active,
.comments-area a:hover,
.comments-area a:active,
.comments-area a:focus,
.post-navigation a:hover,
.post-navigation a:active,
.post-navigation a:focus {
    filter: brightness(1.5);
}

body,
button,
input,
select,
textarea {
    font-family: var(--rw--font-family-main);
}

.widget_block a {
    color: var(--wp--preset--color--secondary-link);
}

.widget-area .widget_block a:hover,
.widget-area .widget_block .entry-content a:focus,
.widget-area .widget_block .entry-content a:active {
    filter: brightness(0.75);
}

.custom-logo {
    border-radius: 100%;
}

.top-bar-inner .social-icon {
    height: 34px;
}

.top-bar-inner .wp-block-search__button {
    padding: 5px;
    clip-path: polygon(
        0px calc(100% - 4px),
        4px calc(100% - 4px),
        4px 100%,
        calc(100% - 4px) 100%,
        calc(100% - 4px) calc(100% - 4px),
        100% calc(100% - 4px),
        100% 4px,
        calc(100% - 4px) 4px,
        calc(100% - 4px) 0px,
        4px 0px,
        4px 4px,
        0px 4px
    );
    border: 0px;
    background-color: transparent;
    cursor: pointer;
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--rw--font-family-header);
    text-transform: uppercase;
}

.wp-block-heading {
    font-family: var(--rw--font-family-main);
    text-transform: initial;
}

h1.site-title,
p.site-title {
    font-family: var(--rw--font-family-header);
    text-transform: uppercase;
    font-size: 2.5rem;
    text-shadow: grey 0px -2px;
}

.secondary .widget-title {
    font-family: var(--rw--font-family-header);
    text-transform: uppercase;
}

.social-widget {
    max-width: calc(54px * 4);
    margin: 0 auto;
}

.topbar {
    min-height: 50px;
    background-color: #000;
}

.top-bar-inner {
    max-width: calc(1403px - 8.3333%);
    margin: 0 auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
}

.main-navigation a {
    font-family: var(--rw--font-family-header);
    text-transform: uppercase;
    font-size: 1.25rem;
    color: var(--wp--preset--color--primary-text);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
    color: var(--wp--preset--color--primary-link);
}

.social-icon {
}

.social-icon img {
    max-width: 32px;
    max-height: 32px;
}

.social-icon a {
    display: inline-flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
    clip-path: polygon(
        0px calc(100% - 4px),
        4px calc(100% - 4px),
        4px 100%,
        calc(100% - 4px) 100%,
        calc(100% - 4px) calc(100% - 4px),
        100% calc(100% - 4px),
        100% 4px,
        calc(100% - 4px) 4px,
        calc(100% - 4px) 0px,
        4px 0px,
        4px 4px,
        0px 4px
    );
}

.social-icon a:hover {
    scale: 1.1;
    transition: all 0.2s ease-in-out;
}

.social-icon.social-icon-bluesky a {
    background: #0a7bff;
    background: linear-gradient(180deg, rgba(10, 123, 255, 1) 0%, rgba(89, 185, 255, 1) 100%);
}

.social-icon.social-icon-instagram a {
    background: #ca05e7;
    background: linear-gradient(180deg, rgba(202, 5, 231, 1) 0%, rgba(255, 11, 89, 1) 50%, rgba(255, 195, 1, 1) 100%);
}

.social-icon.social-icon-mastodon a {
    background: #6364ff;
    background: linear-gradient(180deg, rgba(99, 100, 255, 1) 0%, rgba(85, 55, 206, 1) 100%);
}

.social-icon.social-icon-twitch a {
    background: #9147ff;
}

.social-icon.social-icon-itch a {
    background: #fa5c5c;
}

.social-icon.social-icon-linkedin a {
    background: #0b66c3;
}

.social-icon.social-icon-spotify a {
    background: #1ed760;
}

.social-icon.social-icon-wordpress a {
    background: #585c60;
}

.social-icon.social-icon-github a {
    background: #181515;
}

.social-icon.social-icon-threads a {
    background: #000000;
}

.social-icon.social-icon-rss a {
    background: #eb6221;
}

.comments-area {
    clip-path: polygon(
        0px calc(100% - 16px),
        8px calc(100% - 16px),
        8px calc(100% - 8px),
        16px calc(100% - 8px),
        16px 100%,
        calc(100% - 16px) 100%,
        calc(100% - 16px) calc(100% - 8px),
        calc(100% - 8px) calc(100% - 8px),
        calc(100% - 8px) calc(100% - 16px),
        100% calc(100% - 16px),
        100% 16px,
        calc(100% - 8px) 16px,
        calc(100% - 8px) 8px,
        calc(100% - 16px) 8px,
        calc(100% - 16px) 0px,
        16px 0px,
        16px 8px,
        8px 8px,
        8px 16px,
        0px 16px
    );
}

.hentry,
.wp-block-button .wp-block-button__link,
.pagination,
.post-navigation,
input[type="submit"],
.page-header {
    clip-path: polygon(
        0px calc(100% - 16px),
        8px calc(100% - 16px),
        8px calc(100% - 8px),
        16px calc(100% - 8px),
        16px 100%,
        calc(100% - 16px) 100%,
        calc(100% - 16px) calc(100% - 8px),
        calc(100% - 8px) calc(100% - 8px),
        calc(100% - 8px) calc(100% - 16px),
        100% calc(100% - 16px),
        100% 16px,
        calc(100% - 8px) 16px,
        calc(100% - 8px) 8px,
        calc(100% - 16px) 8px,
        calc(100% - 16px) 0px,
        16px 0px,
        16px 8px,
        8px 8px,
        8px 16px,
        0px 16px
    );
}

.page-header {
    border-left: none;
    background-color: var(--wp--preset--color--tertiary-link);
}

.page-header h1 {
    font-family: var(--rw--font-family-header);
    color: white;
}

.nav-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nav-links:before,
.nav-links:after {
    display: none;
}

.nav-previous,
.nav-next {
    width: 50%;
}

.nav-links a {
    padding: 8.3333%;
}

.nav-links .meta-nav {
    font-family: var(--rw--font-family-header);
    font-size: 2rem;
}

.nav-links .post-title {
    font-family: var(--rw--font-family-main);
    font-size: 1.5rem;
}

.post-navigation div + div {
    border-top: 0px;
}

.post-navigation .nav-next {
    text-align: right;
}

.wp-block-button .wp-block-button__link {
    border-radius: 0px !important;
    font-family: var(--rw--font-family-header);
}

.form-submit input[type="Submit"],
.comment-reply-title,
#webmention-submit,
.comments-title {
    font-family: var(--rw--font-family-header);
}

#webmention-form {
    margin-top: 1.6842em;
}

.post-thumbnail {
    clip-path: polygon(
        0px calc(100% - 16px),
        0px 100%,
        100% 100%,
        100% 16px,
        calc(100% - 8px) 16px,
        calc(100% - 8px) 8px,
        calc(100% - 16px) 8px,
        calc(100% - 16px) 0px,
        16px 0px,
        16px 8px,
        8px 8px,
        8px 16px,
        0px 16px
    );
}

@media screen and (min-width: 59.6875em) {
    body:before {
        display: none;
    }

    .site-branding {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* .topbar-widget {
        margin: 0 auto;
        max-width: calc(1403px - 8.3333%);
    } */

    .site-footer {
        float: none;
        margin: 0px;
        width: 100%;
        background-color: #000;
    }

    .site-header {
        border-bottom: 0;
        margin: 20% 0;
        padding: 0 5%;
        margin-bottom: 20px;
    }

    .custom-logo {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20%;
    }

    .main-navigation {
        margin: 20% 0;
        padding: 0 5%;
    }

    .secondary {
        padding-left: 5%;
        padding-right: 5%;
    }

    .site-branding-text,
    .main-navigation,
    .secondary .widget {
        clip-path: polygon(
            0px calc(100% - 16px),
            8px calc(100% - 16px),
            8px calc(100% - 8px),
            16px calc(100% - 8px),
            16px 100%,
            calc(100% - 16px) 100%,
            calc(100% - 16px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 8px),
            calc(100% - 8px) calc(100% - 16px),
            100% calc(100% - 16px),
            100% 16px,
            calc(100% - 8px) 16px,
            calc(100% - 8px) 8px,
            calc(100% - 16px) 8px,
            calc(100% - 16px) 0px,
            16px 0px,
            16px 8px,
            8px 8px,
            8px 16px,
            0px 16px
        );
        background-color: white;
        padding: 15px;
    }

    .site-branding-text {
        background-color: var(--wp--preset--color--tertiary-link);
        color: white;
    }

    .site-branding-text a,
    .secondary .widget.widget_nav_menu {
        color: white;
    }

    .site-branding-text a:hover,
    .site-branding-text a:focus,
    .site-branding-text a:active {
        color: lightgray;
    }

    .format-aside .entry-title,
    .format-image .entry-title,
    .format-video .entry-title,
    .format-quote .entry-title,
    .format-gallery .entry-title,
    .format-status .entry-title,
    .format-link .entry-title,
    .format-audio .entry-title,
    .format-chat .entry-title {
        font-size: 39px;
        font-size: 3.9rem;
        line-height: 1.2308;
        margin-bottom: 1.2308em;
    }
}

.widget-area h1,
.widget-area h2,
.widget-area h3,
.widget-area h4,
.widget-area h5,
.widget-area h6 {
    font-family: var(--rw--font-family-header);
    text-transform: uppercase;
}

.widget-area .widget:last-of-type {
    padding: 0px;
}

.freelance-availability-widget {
    padding: 15px;
}

.freelance-availability-widget .wp-block-button__link:hover,
.freelance-availability-widget .wp-block-button__link:focus,
.freelance-availability-widget .wp-block-button__link:active {
    filter: brightness(0.8);
}

.freelance-availability-widget-soon {
    background-color: #ffffe3;
    color: var( --wp--preset--color--primary-text );
}

.freelance-availability-widget-soon h3 {
    color: #c55200;
}

.freelance-availability-widget-soon .wp-block-button__link {
    background-color: #e86100;
    color: white;
}

.freelance-availability-widget.freelance-availability-widget-available {
    background-color: #d4fad2;
    color: var( --wp--preset--color--primary-text );
}

.freelance-availability-widget-unavailable {
    display: none;
}

.freelance-availability-widget-available .wp-block-button__link {
    background-color: #2c5f34;
    color: white;
}

.freelance-availability-widget-available h3 {
    color: #25512c;
}


.format-aside {
    background-color: #e5f0f0;
}

.format-aside .entry-footer {
    background-color: #dfeded;
}

.posted-on:before,
.cat-links:before,
.tags-links:before,
.comments-link:before {
    content: "";
}

.entry-footer {
    font-family: var(--rw--font-family-main);
}

.entry-footer path,
.entry-footer polygon {
    fill: rgba(51, 51, 51, 0.7);
}

.byline-icons {
    max-width: 16px;
    max-height: 16px;
    margin-right: 2px;
}

.pagination .next:before,
.pagination .prev:before {
    display: none;
}

.pagination svg {
    width: 30px;
    height: 30px;
    fill: #fff;
    margin-top: 15px;
}

.background-image {
    background-image: url("images/web-bg.webp");
    background-repeat: repeat-x;
    background-position: bottom;
}

.site-footer {
    background-image: url("images/footer-bg.webp");
    background-repeat: repeat-x;
    background-position: top;
}

.site:after {
    position: relative;
    width: 67px;
    height: 88px;
    background-image: url("images/rhys-traffic-cone.webp");
    left: 10vw;
}

.widget {
    color: var(--wp--preset--color--secondary-text);
}

.widget h1,
.widget h2,
.widget h3,
.widget h4,
.widget h5,
.widget h6 {
    color: var(--wp--preset--color--text);
}

.site-info .widget {
    margin-bottom: 20px;
    color: white;
}

figcaption {
    color: var(--wp--preset--color--secondary-text);
    font-size: 1.1em;
}

@media (max-width: 38.749999999em) {

    .secondary.toggled-on {
        padding-top: 8%;
        padding-bottom: 8%;
    }

    .site-main {
        padding: 8% 0px;
    }

    article {
        margin-top: 8%;
        margin-bottom: 8%;
    }

    .site-info {
        margin-top: 20%;
    }

    .pagination .current .screen-reader-text {
        display: none;
    }

    .pagination svg {
        margin-top: 7.5px;
    }

    .navigation.post-navigation {
        margin-top: 8%;
        margin-bottom: 8%;
    }
}