/*
Theme Name: Snowsy Headless Minimal
Theme URI: https://snowsy.com.au/
Author: Snowsy
Author URI: https://snowsy.com.au/
Description: Minimal theme shell for a headless WordPress backend.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: snowsy-headless-minimal
*/

:root {
  --color-primary: #509aa0;
  --color-primary-50: #eff8f8;
  --color-primary-100: #d8ecec;
  --color-primary-200: #b7dadc;
  --color-primary-300: #8cc2c5;
  --color-primary-400: #67abb0;
  --color-primary-500: #509aa0;
  --color-primary-600: #447f85;
  --color-primary-700: #3b686d;
  --color-primary-800: #35575b;
  --color-primary-900: #30494d;
  --color-primary-950: #19292b;
  --color-secondary: #9a72e8;
  --color-secondary-50: #faf7ff;
  --color-secondary-100: #f3edff;
  --color-secondary-200: #e8dcff;
  --color-secondary-300: #d5c0ff;
  --color-secondary-400: #b99af7;
  --color-secondary-500: #9a72e8;
  --color-secondary-600: #8052cf;
  --color-secondary-700: #693eae;
  --color-secondary-800: #57378d;
  --color-secondary-900: #493073;
  --color-secondary-950: #2e1b4d;
  --color-border: #dbe4ea;
  --color-surface: #ffffff;
  --focus-outline-color: var(--color-primary-500);
  --focus-outline-width: 2px;
  --focus-outline-offset: 3px;
}

.snowsy-contact-form-content *,
.snowsy-contact-form-content ::after,
.snowsy-contact-form-content ::before,
.snowsy-contact-form-content ::backdrop,
.snowsy-contact-form-content ::file-selector-button {
  border-color: var(--color-border, currentcolor);
}

.snowsy-contact-form-content
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus,
.snowsy-contact-form-content
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
  box-shadow: none !important;
  outline: var(--focus-outline-width) dashed var(--focus-outline-color) !important;
  outline-offset: var(--focus-outline-offset);
}

.snowsy-contact-form-content label:has(input:focus-visible),
.snowsy-contact-form-content label:has(select:focus-visible),
.snowsy-contact-form-content label:has(textarea:focus-visible) {
  box-shadow: none !important;
  outline: var(--focus-outline-width) dashed var(--focus-outline-color) !important;
  outline-offset: var(--focus-outline-offset);
}

.snowsy-contact-form-content
  :where(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible:not(:focus) {
  outline: none;
}

.snowsy-contact-form-content .ff-el-form-control,
.snowsy-contact-form-content .ff-default .ff-el-form-control,
.snowsy-contact-form-content input[type="text"],
.snowsy-contact-form-content input[type="email"],
.snowsy-contact-form-content input[type="tel"],
.snowsy-contact-form-content input[type="number"],
.snowsy-contact-form-content input[type="url"],
.snowsy-contact-form-content textarea,
.snowsy-contact-form-content select {
  min-height: 50px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: inherit;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.snowsy-contact-form-content .ff-el-form-control:hover,
.snowsy-contact-form-content .ff-default .ff-el-form-control:hover,
.snowsy-contact-form-content input[type="text"]:hover,
.snowsy-contact-form-content input[type="email"]:hover,
.snowsy-contact-form-content input[type="tel"]:hover,
.snowsy-contact-form-content input[type="number"]:hover,
.snowsy-contact-form-content input[type="url"]:hover,
.snowsy-contact-form-content textarea:hover,
.snowsy-contact-form-content select:hover,
.snowsy-contact-form-content .ff-el-form-control:focus,
.snowsy-contact-form-content .ff-default .ff-el-form-control:focus,
.snowsy-contact-form-content input[type="text"]:focus,
.snowsy-contact-form-content input[type="email"]:focus,
.snowsy-contact-form-content input[type="tel"]:focus,
.snowsy-contact-form-content input[type="number"]:focus,
.snowsy-contact-form-content input[type="url"]:focus,
.snowsy-contact-form-content textarea:focus,
.snowsy-contact-form-content select:focus,
.snowsy-contact-form-content .ff-el-form-control:focus-visible,
.snowsy-contact-form-content .ff-default .ff-el-form-control:focus-visible,
.snowsy-contact-form-content input[type="text"]:focus-visible,
.snowsy-contact-form-content input[type="email"]:focus-visible,
.snowsy-contact-form-content input[type="tel"]:focus-visible,
.snowsy-contact-form-content input[type="number"]:focus-visible,
.snowsy-contact-form-content input[type="url"]:focus-visible,
.snowsy-contact-form-content textarea:focus-visible,
.snowsy-contact-form-content select:focus-visible {
  border-color: var(--color-primary);
}

.snowsy-contact-form-content label,
.snowsy-contact-form-content .ff-el-input--label label {
  color: inherit;
}

.snowsy-contact-form-content .ff-btn,
.snowsy-contact-form-content .ff-btn-submit,
.snowsy-contact-form-content .ff-default .ff-btn,
.snowsy-contact-form-content .ff-default .ff-btn-submit,
.snowsy-contact-form-content .ff-default .ff-btn-primary:not(.ff_btn_no_style),
.snowsy-contact-form-content .ff-default .ff-btn-secondary:not(.ff_btn_no_style),
.snowsy-contact-form-content button,
.snowsy-contact-form-content input[type="submit"] {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
  background: var(--color-secondary) !important;
  color: #ffffff !important;
  box-shadow: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.snowsy-contact-form-content .ff-btn:hover,
.snowsy-contact-form-content .ff-btn-submit:hover,
.snowsy-contact-form-content .ff-default .ff-btn:hover,
.snowsy-contact-form-content .ff-default .ff-btn-submit:hover,
.snowsy-contact-form-content .ff-default .ff-btn-primary:not(.ff_btn_no_style):hover,
.snowsy-contact-form-content .ff-default .ff-btn-secondary:not(.ff_btn_no_style):hover,
.snowsy-contact-form-content button:hover,
.snowsy-contact-form-content input[type="submit"]:hover,
.snowsy-contact-form-content .ff-btn:focus,
.snowsy-contact-form-content .ff-btn-submit:focus,
.snowsy-contact-form-content .ff-default .ff-btn:focus,
.snowsy-contact-form-content .ff-default .ff-btn-submit:focus,
.snowsy-contact-form-content .ff-default .ff-btn-primary:not(.ff_btn_no_style):focus,
.snowsy-contact-form-content .ff-default .ff-btn-secondary:not(.ff_btn_no_style):focus,
.snowsy-contact-form-content button:focus,
.snowsy-contact-form-content input[type="submit"]:focus,
.snowsy-contact-form-content .ff-btn:focus-visible,
.snowsy-contact-form-content .ff-btn-submit:focus-visible,
.snowsy-contact-form-content .ff-default .ff-btn:focus-visible,
.snowsy-contact-form-content .ff-default .ff-btn-submit:focus-visible,
.snowsy-contact-form-content .ff-default .ff-btn-primary:not(.ff_btn_no_style):focus-visible,
.snowsy-contact-form-content .ff-default .ff-btn-secondary:not(.ff_btn_no_style):focus-visible,
.snowsy-contact-form-content button:focus-visible,
.snowsy-contact-form-content input[type="submit"]:focus-visible {
  border-color: var(--color-secondary-700);
  background: var(--color-secondary-600) !important;
}

.snowsy-contact-form-content input[type="checkbox"]:checked ~ label span svg {
  display: inline-flex;
}

::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-800);
}

::-moz-selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-800);
}