/*
Theme Name: Collaborare Consulting Custom Theme
Theme URI: http://www.collaborareconsulting.com/
Author: Steve Woodson
Author URI: https://stevenwoodson.com/
Description: A custom theme for Collaborare Consulting by Steve Woodson
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* Global Variables
   ========================================================================== */
body {
  --outline-color: var(--wp--preset--color--focus);
  --outline-offset: max(6px, 0.16em);
  --outline-size: max(4px, 0.08em);
  --outline-style: solid;
}

html {
  scrollbar-gutter: stable;
}

/* Focus Styles
   ========================================================================== */
/* Base :focus styles for fallback purposes
:is(a, button, input, select, textarea, summary):focus,
[type='checkbox']:focus + span:after,
[type='radio']:focus + span:after {
  border-radius: 0.5rem;
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
} */

/* Final :focus-visible styles */
:is(a, button, input, select, summary, textarea):focus-visible,
[type='checkbox']:focus-visible + span:after,
[type='radio']:focus-visible + span:after {
  border-radius: 0.5rem;
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset, var(--outline-size));
  z-index: 1;
}

:target {
  scroll-margin-top: 2ex;
}

/* Base selection styles that invert whatever colors are rendered */
::selection {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  filter: none;
  -webkit-text-fill-color: initial;
}



main {
  & label + input,
  & label > input,
  & label + select,
  & label > select,
  & label + textarea,
  & label > textarea {
    margin-top: 0.5rem;
  }

  & fieldset {
    border: 0;
    padding: 1rem 0 0 1rem;
    position: relative;
  }

  & label,
  & legend {
    display: block;
    padding-top: 5px;
    position: relative;
  }

  & legend {
    padding: 0 0.5rem;
    margin-left: (var(--wp--preset--spacing--20) * -1);
  }

  & label.error,
  & .wsf-invalid-feedback {
    color: var(--wp--preset--color--alert);
    font-size: var(--wp--preset--font-size--small);
    margin-top: 0.5rem;

    [role='alert'] {
      color: var(--wp--preset--color--alert);
    }
  }

  & label.valid {
    color: var(--wp--preset--color--success);
  }

  /* Inputs
   ========================================================================== */
  & input:not([type='submit']),
  & select,
  & textarea {
    background: var(--wp--preset--color--base-2);
    border: 4px solid var(--wp--preset--color--contrast);
    border-radius: 6px;
    box-sizing: border-box;
    color: var(--wp--preset--color--contrast-3);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    padding: 1rem;
    vertical-align: top;
    width: 100%;

    &[type='date'],
    &[type='month'],
    &[type='week'],
    &[type='datetime-local'] {
      padding: 8px 12px;
    }

    &:not(.browser-default):focus:not([readonly]) {
      box-shadow: none;
    }
  }

  /* Required styles */
  & input:not([type='submit'])[required],
  & textarea[required],
  & .content-editor[required] .editor__content {
    background: var(--wp--preset--color--base)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 30 30' version='1.1' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M0,0l30,30l0,-30l-30,0Z' style='fill:%23cc284e;'/%3E%3Cpath d='M24.773,1.312l1.949,1.126l-2.273,3.937l4.546,0l0,2.25l-4.546,0l2.273,3.937l-1.949,1.126l-2.273,-3.938l-2.273,3.938l-1.949,-1.126l2.273,-3.937l-4.546,0l0,-2.25l4.546,0l-2.273,-3.937l1.949,-1.126l2.273,3.938l2.273,-3.938Z' style='fill:%23fff;'/%3E%3C/svg%3E")
      right top no-repeat;
    background-size: 1.5em;
  }

  & select[required] {
    background-color: var(--wp--preset--color--base);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 30 30' version='1.1' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M0,0l30,30l0,-30l-30,0Z' style='fill:%23cc284e;'/%3E%3Cpath d='M24.773,1.312l1.949,1.126l-2.273,3.937l4.546,0l0,2.25l-4.546,0l2.273,3.937l-1.949,1.126l-2.273,-3.938l-2.273,3.938l-1.949,-1.126l2.273,-3.937l-4.546,0l0,-2.25l4.546,0l-2.273,-3.937l1.949,-1.126l2.273,3.938l2.273,-3.938Z' style='fill:%23fff;'/%3E%3C/svg%3E"),
      url("data:image/svg+xml;charset=utf-8,  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><polygon points='0,0 60,0 30,40' style='fill:black;'/>  </svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: right top, right 14px center;
    background-size: 1.5em, 13px;
    padding-right: 37px;
  }

  & select {
    appearance: none;
    background: var(--wp--preset--color--base)
      url("data:image/svg+xml;charset=utf-8,  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><polygon points='0,0 60,0 30,40' style='fill:black;'/>  </svg>")
      right 10px center no-repeat;
    background-size: 13px;
    padding-right: 34px;

    &::-ms-expand {
      display: none;
    }
  }

  & input[type='color'] {
    padding: 1px;
  }

  /* Helpers
   ========================================================================== */

  & button[type='submit'],
  & input[type='submit'] {
    background-color: var(--wp--preset--color--interactive-button);
    border: 0;
    border-radius: 12px;
    color: var(--wp--preset--color--contrast-3);
    font-family: var(--wp--preset--font-family--outfit);
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 600;
    letter-spacing: 5%;
    line-height: 1.2;
    padding: calc(0.667em + 2px) calc(1.333em + 2px);
    text-decoration: none;

    &:active {
      background-color: var(--wp--preset--color--interactive-button-hover);
      color: var(--wp--preset--color--contrast-2);
    }

    &:focus {
      background-color: var(--wp--preset--color--interactive-button-hover);
      color: var(--wp--preset--color--contrast-2);
    }

    &:hover {
      background-color: var(--wp--preset--color--interactive-button-hover);
      color: var(--wp--preset--color--contrast-2);
    }
  }

  /* WS Form Helpers
   ========================================================================== */

  & .wsf-field-wrapper {
    padding: 0 1rem 1rem 0;

    > p:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }

  & .wsf-text-danger {
    display: none;
  }

  /* Error & Success styles */
  & .wsf-validated {
    & input:not([type='submit']),
    & select,
    & textarea,
    & .content-editor {
      &[aria-invalid='true'] {
        border: 4px solid var(--wp--preset--color--alert);
        box-shadow: inset 0px 0px 3px var(--wp--preset--color--custom-pink-6);
      }

      &[aria-invalid='false'] {
        border: 4px solid var(--wp--preset--color--success);
        box-shadow: inset 0px 0px 3px var(--wp--preset--color--success);
      }
    }
  }
}