/*
Theme Name: Mark
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.0
Tested up to: 6.4.3
Requires PHP: 5.7
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mark
Tags: blog, news, portfolio, one-column, wide-blocks, accessibility-ready, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, sticky-post, style-variations, threaded-comments, translation-ready
*/

:root {
    --duration-short: 0.3s;
    --duration-medium: 0.5s;
    --accent-mild: color-mix(in srgb, var(--wp--preset--color--accent) 33%, transparent);
    --accent-medium: color-mix(in srgb, var(--wp--preset--color--accent) 66%, transparent);
}

:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent-2);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

body * {
    box-sizing: border-box;
}

strong {
    font-weight:500;
}

.wp-site-blocks {
    position:relative;
}

.relative {
    position:relative;
}

.absolute {
    position:absolute;
}

.fixed {
    position:fixed;
}

.post-info {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--10);
}

.post-info > div {
    width:100%;
    margin:0;
}

@media screen and (max-width:1280px) {
    .post-breakpoint {
        max-width: var(--wp--style--global--content-size) !important;
        position: relative;  
    }
    .post-info {
        flex-direction: row;
    }    
}

.z-2 {
    z-index:2;
}

.inset-0 {
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.inset-x-0	{
    left:0;
    right:0;
}

.bottom-0 {
    bottom:0;
}

.min-w-max {
    min-width:max-content;
}

.hero-bars {
    transition: gap 1s ease;
}

.hero-bars-tablet {
    transition: gap 1s ease;
}

.hero-info, .hero span {
    opacity:0;
    transition: opacity 1s ease;
}

.hero:hover .hero-bars {    
    gap:17%;
}

.hero:hover .hero-bars-tablet {
    gap:34%;
}

.hero:hover :is(.hero-info, .hero-info a) {
    opacity:1;
    text-decoration: none;
}

.hero:hover span {
    opacity:0.5 !important;
}

.link-weight-overide a {
    font-weight:400;
}

.cover-width-100>div {
    width:100% !important;
}

.flex {
    display:flex;
}

.items-end {
    align-items: end !important;
}

.hero-subheader span {
    display:block;
    padding-right: 0.25rem;
}

.pullquote {
    margin: 0;
    margin-inline-end: 0 !important;
}

.pullquote p {
    margin:0;
}

.link-underline a {
    text-decoration:underline;
}

.lg-block-md-inline span {
    display:block;
}

@media screen and (max-width:1023px) {
    .lg-block-md-inline span {
        display:inline;
    }  
}

@media screen and (max-width:767px){
    .wp-block-cover.tw-ratio-16-9 {
        aspect-ratio: 1/1;
    }

    .hero-subheader {
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }

    .hero-info {
        opacity:1;
    }
}

.caption-center > figcaption {
    text-align:center;
}

.wp-element-button:focus-visible,
.wp-block-site-title a:focus-visible {
    border-radius: 3rem;
}

/* Buttons + Site title */

.wp-block-button:not(.is-style-outline):not(.is-style-primary) .wp-element-button:not(:hover):not(:focus):not(:active),
.wp-block-site-title a:not(:hover):not(:focus):not(:active) {
    background-color: color-mix(in srgb, var(--wp--preset--color--base) 75%, transparent) !important;
    border-color: color-mix(in srgb, var(--wp--preset--color--base) 75%, transparent) !important;
    transition: background-color var(--duration-short) ease, border-color var(--duration-short) ease;
}

.wp-block-button:not(.is-style-outline):not(.is-style-primary) .wp-element-button:hover:not(:active),
.wp-block-site-title a:hover:not(:active) {
    background-color: var(--accent-medium) !important;
    border-color: var(--accent-medium) !important;
}

/* Primary button */

.wp-block-button.is-style-primary .wp-element-button {
    background-color: var(--accent-medium);
    border-color: var(--accent-medium);
    transition: background-color var(--duration-short) ease, border-color var(--duration-short) ease;
}

.wp-block-button.is-style-primary .wp-element-button:hover:not(:active) {
    background-color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-primary .wp-element-button:focus {
    background-color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-primary .wp-element-button:active {
    background-color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}


/* Contact modal */

.contact-modal-overlay {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: color-mix(in srgb, var(--wp--preset--color--contrast-3) 55%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    align-items: center;
    justify-content: center;
}

.contact-modal-overlay::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
}

.contact-modal-overlay.is-open {
    display: flex !important;
}

body.contact-modal-active {
    overflow: hidden;
}

.contact-modal-inner {
    position: relative;
    z-index: 1;
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--contrast);
    border-radius: var(--wp--preset--spacing--20);
    width: min(640px, 90vw);
    max-height: 90vh;
    overflow-y: auto;
}

.contact-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    min-height: 80px;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast-3) 30%, transparent);
}

.contact-modal-title {
    display: flex;
    align-items: center;
    margin: 0 !important;
    font-size: var(--wp--preset--font-size--large);
    font-weight: 500;
    letter-spacing: -1px;
    padding-inline: var(--wp--preset--spacing--30);
}

/* Contact form */

.contact-custom-form {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
    padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
}

.contact-custom-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    color: var(--wp--preset--color--contrast-2);
    font-size: var(--wp--preset--font-size--small);
}

.contact-custom-form input[type="text"],
.contact-custom-form input[type="email"],
.contact-custom-form textarea {
    font: inherit;
    color: inherit;
    background-color: var(--wp--preset--color--base-2);
    border: none;
    border-radius: 0.25rem;
    padding: 0.4em 0.6em;
    width: 100%;
    transition: border-color var(--duration-short) ease;
}

.contact-custom-form input[type="text"]::placeholder,
.contact-custom-form input[type="email"]::placeholder,
.contact-custom-form textarea::placeholder {
    color: var(--wp--preset--color--contrast-3);
}

.contact-custom-form input[type="text"]:focus,
.contact-custom-form input[type="email"]:focus,
.contact-custom-form textarea:focus {
    background-color: var(--wp--preset--color--base-2);
}

.contact-custom-form textarea {
    resize: none;
    min-height: 6em;
}

.contact-custom-form button[type="submit"] {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 500;
    color: var(--wp--preset--color--contrast);
    background-color: var(--accent-medium);
    border: 1px solid var(--accent-medium);
    border-radius: 3rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    align-self: flex-end;
    transition: background-color var(--duration-short) ease, border-color var(--duration-short) ease;
}

.contact-custom-form button[type="submit"]:hover {
    background-color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}

.contact-custom-form button[type="submit"]:focus {
    background-color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}

.contact-custom-form button[type="submit"]:active {
    background-color: var(--wp--preset--color--accent);
    border-color: var(--wp--preset--color--accent);
}

.contact-custom-form button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#contact-honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}

.contact-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast-2);
    cursor: pointer;
    flex-direction: row !important;
}

.contact-success {
    margin: 0;
    color: var(--wp--preset--color--contrast-3);
}


.contact-form-sentence {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    font-size: var(--wp--preset--font-size--small);
}

.contact-form-sentence select {
    font: inherit;
    color: inherit;
    background-color: var(--wp--preset--color--base-2);
    border: none;
    border-radius: 0.25rem;
    padding: 0.3em 1.75em 0.3em 0.75em;
    flex: 1;
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.contact-select-wrapper {
    position: relative;
    flex: 1;
    display: flex;
}

.contact-select-wrapper:has(#contact-role) {
    min-width: 8em;
}

.contact-select-wrapper:has(#contact-reason) {
    min-width: 12em;
}

.contact-select-wrapper::after {
    content: '';
    position: absolute;
    right: 0.75em;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2382827c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    transition: transform var(--duration-short) ease;
}

.contact-select-wrapper.is-open::after {
    transform: translateY(-50%) rotateX(180deg);
}

.contact-form-sentence select:focus {
    outline: none;
    background-color: var(--wp--preset--color--base-2);
}

.contact-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding-inline: var(--wp--preset--spacing--30);
    color: var(--wp--preset--color--contrast-3);
    transition: background-color var(--duration-short) ease, color var(--duration-short) ease;
}

.contact-modal-close:hover {
    background-color: var(--accent-medium);
    color: var(--wp--preset--color--contrast-2);
}

.contact-modal-close:active {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--contrast);
}

/* Featured image */

.wp-block-post-featured-image a {
    border-radius: var(--wp--preset--spacing--10);
    display: block;
}

/* Cards */

.card {
    transition: background-color var(--duration-medium) ease;
}

.card:hover {
    background-color: var(--wp--preset--color--base-2);
}

/* Post terms pill — per-category colors */

.term-blog.is-style-pill a,
.term-project.is-style-pill a {
    transition: background-color var(--duration-short) ease;
}

.term-blog.is-style-pill a {
    background-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 33%, transparent);
}

.term-blog.is-style-pill a:hover {
    background-color: color-mix(in srgb, var(--wp--preset--color--accent-2) 66%, transparent);
}

.term-project.is-style-pill a {
    background-color: var(--accent-mild);
}

.term-project.is-style-pill a:hover {
    background-color: var(--accent-medium);
}