/*
Theme Name: DualTone
Theme URI: https://ballarinconsulting.com/dualtone
Author: David Ballarin Prunera
Author URI: https://profiles.wordpress.org/dballari/
Description: DualTone is a two column layout blog with sticky sidebar on the left, as a tribute to b2/cafelog, the origins of WordPress more than 21 years ago, which is also a two column layout blog. It features a content wide page template for legal text, a blank template for creating any type of content layout and several custom block style variations. With a simple and clean design, it lets your readers focus on your content. Includes several theme styles, a light one (the default one) and a dark one (the futuristic dark style) and some more. Two block sections have been added with contrast and accent color backgrounds. It includes a settings page with some pattern options. It works with WordPress 6.7. Last but not least, check the theme homepage to access a playground demo with the complete demo site content.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dualtone
Tags: blog, two-columns, left-sidebar, block-patterns, block-styles, editor-style, full-site-editing, full-width-template, sticky-post, style-variations, theme-options, threaded-comments, translation-ready, 
*/

/* Fade in animation
--------------------------------------- */
.wp-site-blocks {
    animation: fadeInAnimation ease 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Struture
--------------------------------------- */
.wp-site-blocks {
    max-width: var(--wp--custom--width--max-width);
    margin: 0 auto;
}

/* Remove sticky sidebar - scroll entire page together
--------------------------------------- */
.is-style-sidebar-left .wp-block-group {
    position: static !important;
}

/* Categories list styling
--------------------------------------- */
.wp-block-categories,
.wp-block-categories-list {
    list-style: none;
    padding-left: 0;
}

/* Footer styling - remove blue background
--------------------------------------- */
.site-footer .is-style-section-1 {
    background-color: transparent !important;
}
.site-footer .wp-block-cover {
    background-color: transparent !important;
}
.site-footer,
.site-footer p,
.site-footer a {
    color: var(--wp--preset--color--contrast) !important;
}

/* Pagination - remove black background
--------------------------------------- */
.wp-block-query-pagination a,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers {
    background-color: transparent !important;
    color: var(--wp--preset--color--contrast) !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Site Title
--------------------------------------- */
.wp-block-site-title {
    font-size: 40px !important;
    text-align: left !important;
}
.wp-block-site-title a:hover {
    text-decoration: none !important;
}
.site-header .wp-block-group {
    justify-content: flex-start !important;
}

/* Post Title Spacing
--------------------------------------- */
.wp-block-post-title {
    padding-bottom: 20px !important;
}

/* Single Post Alignment and Styling
--------------------------------------- */
.single main.wp-block-group > .wp-block-post-title {
    padding-top: 0.65rem;
    font-size: var(--wp--preset--font-size--xx-large) !important;
    font-weight: var(--wp--custom--font-weight--semi-black) !important;
    line-height: var(--wp--custom--line-height--xx-large) !important;
    color: #376fa0 !important;
}

.wp-block-template-part.empty {
    margin-block-start: 0;
}

/* Links
--------------------------------------- */
.go-back-link a::before {
    content: '←';
    padding-right: 2px;
}
.go-top-link a::after {
    content: '↑';
}
a.inactive {
    pointer-events: none;
	cursor: default;
}
a[target="_blank"]::after {
    content: "↗";
}
a[target="blank"]::after {
    content: "↗";
}


/* Focusable elements
--------------------------------------- */
:is(input, select, textarea, button, a[href]:not([href="##"]), [tabindex]:not([tabindex=-1])):focus-visible {
    outline: 2px dashed;
}
input:focus { 
    outline: 2px dashed
}

.site-footer :is(input, select, textarea, button, a[href]:not([href="##"]), [tabindex]:not([tabindex=-1])):focus-visible {
    outline: 4px dashed;
}

/* Selection
--------------------------------------- */
::-moz-selection,
::selection {
    color: var(--wp--custom--color--selection-text);
    background: var(--wp--custom--color--selection);
}

/* Form elements
--------------------------------------- */
select,
textarea {
    background-color: var(--wp--custom--color--forms);
    border: var(--wp--custom--border--normal) solid var(--wp--custom--color--forms-border) !important;
    border-radius: 0;
    color: var(--wp--custom--color--forms-text);
    font-family: var(--wp--preset--font-family--inter);
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--custom--line-height--medium);
    padding: 8px;
    width: 100%;
}

/* Font weight helper classes
--------------------------------------- */
.is-weight-black {
    font-weight: var(--wp--custom--font-weight--black);
}
.is-weight-bold {
    font-weight: var(--wp--custom--font-weight--bold);
}
.is-weight-bolder {
    font-weight: var(--wp--custom--font-weight--bolder);
}
.is-weight-semi-bold {
    font-weight: var(--wp--custom--font-weight--semi-bold);
}
.is-weight-semi-black {
    font-weight: var(--wp--custom--font-weight--semi-black);
}

/* Responsive writing mode
--------------------------------------- */
.has-responsive-writing-mode .wp-block-post-title {
    max-width: 670px;
}

@media screen and (width < 980px) {
    .has-responsive-writing-mode > .wp-block-group {
        writing-mode: sideways-rl;
    }
    .has-responsive-writing-mode > .wp-block-group p {
        display: none;
    }
}

/* Footer
--------------------------------------- */
@media screen and (max-width: 600px) {
    .footer-credits .is-content-justification-space-between {
        flex-direction: column-reverse;
    }
    .footer-credits p:nth-child(1) {
        text-align: center;
    }
}

/* Navigation
--------------------------------------- */
.wp-block-navigation__submenu-container {
    border-bottom: 1px solid var(--wp--preset--color--contrast) !important;
}