:root {
    --wc-dark-gray: #2D3142;
    --wc-md-gray: #4F5D75;
    --wc-light-gray: #E5E5E5;
    --wc-white:#FFFFFF;
    --wc-orange:#C8772E;
    --wc-orange-dark:#A8621F;
    --wc-orange-soft:rgba(200, 119, 46, 0.15);
    --wc-row-alt:#F3F5F7;

    --wc-radius: 8px;
    --wc-radius-lg: 14px;

    --wc-shadow-sm: 0 1px 2px rgba(20, 22, 34, 0.12), 0 2px 6px rgba(20, 22, 34, 0.08);
    --wc-shadow: 0 6px 18px rgba(20, 22, 34, 0.18);
    --wc-shadow-lg: 0 18px 48px rgba(20, 22, 34, 0.28);

    --wc-space-section: clamp(3.5rem, 8vw, 6.5rem);
    --wc-ease: cubic-bezier(.2, .7, .2, 1);
    font-size: 16px;
}


/* Scrollbars everywhere: thin, transparent track, amber thumb. Firefox and current
   Chrome/Edge read scrollbar-color; Safari reads the ::-webkit-scrollbar rules. */
*{
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 119, 46, 0.6) transparent;
}

::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track{
    background: transparent;
}

::-webkit-scrollbar-thumb{
    background: rgba(200, 119, 46, 0.6);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover{
    background: var(--wc-orange);
}


.loader{
    width:auto;
    height: 30px;
    margin: auto;
    animation: flip 2s infinite;
    animation-timing-function: ease;
    content: url("../images/logo.svg")
  }

  @keyframes flip{
    0%{
     transform: rotateY(0deg);
   }
   100%{
    transform: rotateY(360deg);
 }
 }


  
@font-face {
    font-family: 'NeoBold';
    src: url('../fonts/ChangelingNeo-Bold.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Bold.woff') format('woff'),
         url('../fonts/ChangelingNeo-Bold.ttf') format('truetype');
    font-display: swap;
  }


  @font-face {
    font-family: 'NeoInline';
    src: url('../fonts/ChangelingNeo-Inline.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Inline.woff') format('woff'),
         url('../fonts/ChangelingNeo-Inline.ttf') format('truetype');
    font-display: swap;
  }


  @font-face {
    font-family: 'NeoLight';
    src: url('../fonts/ChangelingNeo-Light.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Light.woff') format('woff'),
         url('../fonts/ChangelingNeo-Light.ttf') format('truetype');
    font-display: swap;
  }


  @font-face {
    font-family: 'NeoRegular';
    src: url('../fonts/ChangelingNeo-Regular.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Regular.woff') format('woff'),
         url('../fonts/ChangelingNeo-Regular.ttf') format('truetype');
    font-display: swap;
  }


  @font-face {
    font-family: 'NeoStencil';
    src: url('../fonts/ChangelingNeo-Stencil.woff2') format('woff2'),
         url('../fonts/ChangelingNeo-Stencil.woff') format('woff'),
         url('../fonts/ChangelingNeo-Stencil.ttf') format('truetype');
    font-display: swap;
  }


  @font-face {
    font-family: 'PressuraRegular';
    src: url('../fonts/GT-Pressura-Regular.otf') format('opentype');
    /* Text shows right away in a fallback font instead of staying invisible until this loads */
    font-display: swap;
  }

html,
body {
    background-color: var(--wc-light-gray) !important;
    font-family: 'PressuraRegular';
    letter-spacing: 0.02rem;
}



h1, h2, h3, h4, h5, h6{
    font-family: 'NeoRegular';
    letter-spacing: 0.12rem;
}

/* Wide tracking is reserved for short uppercase UI text */
button, .btn, th, label, .form-label, .wc-eyebrow{
    letter-spacing: 0.1rem;
}

.wc-eyebrow{
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--wc-orange);
}


.no-select {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}


.half-font{
    font-size: 0.5rem !important;
}

.three-quarter-font{
    font-size: 0.75rem !important;
}


.one-and-half-font{
    font-size: 1.5rem !important;
}


.bg-wc-dark-gray {
    background: var(--wc-dark-gray);
}

.border-wc-dark-gray {
    border-color: var(--wc-dark-gray) !important;
}

.text-wc-dark-gray {
    color: var(--wc-dark-gray);
}


.bg-wc-md-gray {
    background: var(--wc-md-gray);
}

.border-wc-md-gray {
    border-color: var(--wc-md-gray) !important;
}

.text-wc-md-gray {
    color: var(--wc-md-gray);
}


.bg-wc-light-gray {
    background: var(--wc-light-gray);
}

.border-wc-light-gray {
    border-color: var(--wc-light-gray) !important;
}

.text-wc-light-gray {
    color: var(--wc-light-gray);
}


.bg-wc-white {
    background: var(--wc-white);
}

.border-wc-white {
    border-color: var(--wc-white) !important;
}

.text-wc-white {
    color: var(--wc-white);
}


.bg-wc-orange {
    background: var(--wc-orange);
}

.border-wc-orange {
    border-color: var(--wc-orange) !important;
}

.text-wc-orange {
    color: var(--wc-orange);
}

.rounded-1{
    border-radius: var(--wc-radius) !important;
}

.wc-shadow{
    box-shadow: var(--wc-shadow);
}

.btn{
    --bs-btn-border-radius: var(--wc-radius);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s var(--wc-ease), box-shadow .15s ease;
}

.btn-outline{
    color: var(--wc-light-gray);
}


.btn-outline.orange {
    border-color: var(--wc-orange) !important;
    background-color: var(--wc-dark-gray) !important;
    color: var(--wc-light-gray) !important;
}

.btn-outline.orange:hover {
    background-color: var(--wc-orange) !important;
    color: var(--wc-light-gray) !important;

}

.form-control, .form-select, .input-group-text{
    border-radius: var(--wc-radius);
}


.btn-solid.orange {
    color: var(--wc-white) !important;
    background-color: var(--wc-orange);
    border-color: var(--wc-orange) !important;
}


.btn-solid.orange:hover {
    background-color: var(--wc-orange-dark) !important;
    border-color: var(--wc-orange-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 119, 46, 0.35);
}

.btn-solid.orange:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-solid.orange:disabled {
    opacity: .45;
}

/* Visible keyboard focus everywhere */
.btn:focus-visible,
a:focus-visible,
[role=button]:focus-visible,
.form-check-input:focus-visible{
    outline: 2px solid var(--wc-orange) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/*NAVBAR*/
#navbar {
    height: 75px;
    position: relative;
    box-sizing: border-box;
}

#nav-logo-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 56px;
    width: 56px;
    margin-left: -28px;
    margin-top: -28px;
}

#nav-logo-img {
    display: block;
    height: 56px;
    width: 56px;
}




input[type=text], input[type=email], input[type=password], input[type=number], select{
    background-color: var(--wc-light-gray) !important;
    border-color: var(--wc-light-gray) !important;
    color: var(--wc-dark-gray) !important;
    font-size: 16px !important;
}


input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus, 
input[type=number]:focus,
select:focus
{
    color: var(--wc-dark-gray) !important;
    background-color: var(--wc-light-gray) !important;
    border-color: var(--wc-orange) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px rgba(200, 119, 46, 0.45) !important;
}

.form-check-input{
    background-color: var(--wc-orange) !important;
    color: var(--wc-orange) !important;
    box-shadow: none !important;
    border:none !important;

}

.form-check-input:checked{
    background-color: var(--wc-orange) !important;
    color: var(--wc-light-gray) !important;
    box-shadow: none !important;
    border:none !important;
}

a.text-wc-orange:hover{
    color:var(--wc-orange);
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}