/*
Theme Name: Sarafan
Theme URI: https://sarafan.club/
Description: Code-controlled storefront layer for Sarafan, based on Blocksy.
Author: Sarafan
Version: 0.1.2
Template: blocksy
Text Domain: sarafan
Requires at least: 6.9
Requires PHP: 8.2
*/

:root {
    --sarafan-brand-accent: var(--theme-palette-color-1, #3a4f39);
    --sarafan-form-border: #d8d4cf;
    --sarafan-form-border-hover: #bdb6af;
    --sarafan-form-border-focus: #756b63;
    --sarafan-form-focus-ring: rgba(117, 107, 99, .14);
    --theme-form-field-border-width: 1px;
    --theme-form-field-border-style: solid;
    --theme-form-field-border-initial-color: var(--sarafan-form-border);
    --theme-form-field-border-focus-color: var(--sarafan-form-border-focus);
    --theme-form-field-border-radius: 6px;
}

/* Keep the approved full wordmark in every Blocksy header instance, including
 * the separate desktop and mobile header trees. The existing image remains in
 * the markup for the home link and accessible name; this visual is controlled
 * by the child theme so it does not depend on a Customizer media attachment. */
.site-branding .site-logo-container {
    display: inline-flex;
    width: clamp(164px, 18vw, 210px);
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1120 / 225;
    align-items: center;
    background: url("assets/images/brand/sarafan-wordmark-solid-dot.png") left center / contain no-repeat;
    color: #171717;
    font-size: 0;
    text-decoration: none;
}

.site-branding .site-logo-container img {
    display: none !important;
}

.site-branding .site-logo-container::before,
.site-branding .site-logo-container::after {
    content: none;
}

/* One calm, predictable field treatment across Blocksy, WooCommerce and Dokan.
 * The complete border shorthand prevents inherited per-side widths from
 * producing the former top/left-only frame. */
:where(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]),
    textarea,
    select
) {
    border: 1px solid var(--sarafan-form-border);
    border-radius: 6px;
    background-color: #fff;
    box-shadow: none;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

:where(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]),
    textarea,
    select
):hover:not(:disabled):not([readonly]) {
    border-color: var(--sarafan-form-border-hover);
}

:where(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]),
    textarea,
    select
):focus,
:where(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="image"]),
    textarea,
    select
):focus-visible {
    border-color: var(--sarafan-form-border-focus);
    box-shadow: 0 0 0 2px var(--sarafan-form-focus-ring);
    outline: none;
}

:where(input, textarea, select)[aria-invalid="true"] {
    border-color: #b96863;
}

:where(input, textarea, select)[aria-invalid="true"]:focus {
    border-color: #a9524d;
    box-shadow: 0 0 0 2px rgba(169, 82, 77, .12);
}