/*
 Theme Name:     Husk Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Husk
 Author URI:     https://www.husk.co.nz/
 Template:       Divi
 Version:        1.0.0
*/

/* ==========================================================================
 CSS Variables
 ========================================================================== */

 :root {
    /* Brand Colors */
    --color-cobalt: #2b29e3;
    --color-midnight: #001c59;
    --color-ocean: #1A6BBD;
    --color-sky: #54b2e5;
    --color-marigold: #f2ba57;
    --color-grey: #8a8c8e;
    --color-light-grey: #f4f4f4;
    --color-white: #ffffff;
    --color-black: #000000;
  
    /* Typography */
    --font-primary: Poppins, Arial, sans-serif;
    --font-secondary: Poppins, Arial, sans-serif;
    --font-size-base: 1rem;
    --font-size-sm: 0.75rem;
    --font-size-md: 0.875rem;
    --font-size-lg: 1.125rem;
    --line-height-tight: 1.2em;
    --line-height-normal: 1.4em;
    --line-height-relaxed: 1.8em;
  
    /* Spacing */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 36px;
  
    /* Transitions */
    --transition-base: all 300ms ease 0ms;
  
    /* Borders */
    --border-radius: 0px;
    --border-width: 2px;
  }
  
  /* ==========================================================================
   Buttons
   ========================================================================== */
  
  .btn, 
  .nf-form-content input[type=submit] {
    display: inline-block;
    font-size: var(--font-size-base) !important;
    font-family: var(--font-primary);
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0px;
    line-height: var(--line-height-tight) !important;
    border-radius: var(--border-radius) !important;
    border: var(--border-width) solid !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    transition: var(--transition-base);
    cursor: pointer !important;
    height: auto !important;
    text-decoration: none !important;
  }
  
  .btn {
      margin: 0 var(--spacing-sm) var(--spacing-sm) 0;
  }
  
  /* COBALT */
  .btn-cobalt {
    color: var(--color-white) !important;
    background-color: var(--color-cobalt) !important;
    border-color: var(--color-cobalt) !important;
  }
  .btn-cobalt:hover {
    color: var(--color-cobalt) !important;
    background-color: transparent !important;
  }
  .btn-cobalt-transparent {
    color: var(--color-cobalt) !important;
    background-color: transparent !important;
    border-color: var(--color-cobalt) !important;
  }
  .btn-cobalt-transparent:hover {
    color: var(--color-white) !important;
    background-color: var(--color-cobalt) !important;
  }
  
  /* WHITE */
  .btn-white {
    color: var(--color-cobalt) !important;
    background-color: var(--color-white) !important;
    border-color: var(--color-white) !important;
  }
  .btn-white:hover {
    color: var(--color-white) !important;
    background-color: transparent !important;
  }
  .btn-white-transparent {
    color: var(--color-white) !important;
    background-color: transparent !important;
    border-color: var(--color-white) !important;
  }
  .btn-white-transparent:hover {
    color: var(--color-cobalt) !important;
    background-color: var(--color-white) !important;
  }
  
  /* MIDNIGHT */
  .btn-midnight {
    color: var(--color-white) !important;
    background-color: var(--color-midnight) !important;
    border-color: var(--color-midnight) !important;
  }
  .btn-midnight:hover {
    color: var(--color-midnight) !important;
    background-color: transparent !important;
  }
  .btn-midnight-transparent {
    color: var(--color-midnight) !important;
    background-color: transparent !important;
    border-color: var(--color-midnight) !important;
  }
  .btn-midnight-transparent:hover {
    color: var(--color-white) !important;
    background-color: var(--color-midnight) !important;
  }
  
  /* OCEAN */
  .btn-ocean {
    color: var(--color-white) !important;
    background-color: var(--color-ocean) !important;
    border-color: var(--color-ocean) !important;
  }
  .btn-ocean:hover {
    color: var(--color-ocean) !important;
    background-color: transparent !important;
  }
  .btn-ocean-transparent {
    color: var(--color-ocean) !important;
    background-color: transparent !important;
    border-color: var(--color-ocean) !important;
  }
  .btn-ocean-transparent:hover {
    color: var(--color-white) !important;
    background-color: var(--color-ocean) !important;
  }
  
  /* SKY */
  .btn-sky {
    color: var(--color-white) !important;
    background-color: var(--color-sky) !important;
    border-color: var(--color-sky) !important;
  }
  .btn-sky:hover {
    color: var(--color-sky) !important;
    background-color: transparent !important;
  }
  .btn-sky-transparent {
    color: var(--color-sky) !important;
    background-color: transparent !important;
    border-color: var(--color-sky) !important;
  }
  .btn-sky-transparent:hover {
    color: var(--color-white) !important;
    background-color: var(--color-sky) !important;
  }
  
  /* MARIGOLD */
  .btn-marigold,
  .nf-form-content input[type=submit] {
    color: var(--color-midnight) !important;
    background-color: var(--color-marigold) !important;
    border-color: var(--color-marigold) !important;
  }
  .btn-marigold:hover,
  .nf-form-content input[type=submit]:hover  {
    color: var(--color-marigold) !important;
    background-color: transparent !important;
  }
  .btn-marigold-transparent {
    color: var(--color-marigold) !important;
    background-color: transparent !important;
    border-color: var(--color-marigold) !important;
  }
  .btn-marigold-transparent:hover {
    color: var(--color-midnight) !important;
    background-color: var(--color-marigold) !important;
  }
  
  /* Inline Buttons */
  .btn-group .btn {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  
  .inline-buttons .et_pb_button_module_wrapper {
    display: inline-block;
  }
  
  /* ==========================================================================
   Forms
   ========================================================================== */
  .nf-form-content {
    margin-left: 0 !important;
    padding: 0 !important;
  }
  
  .nf-form-fields-required,
  .nf-error.field-wrap .nf-field-element:after {
    display: none;
  }
  
  .nf-error-msg {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
  }
  
  .nf-field-container {
    margin-bottom: var(--spacing-sm) !important;
  }
  
  .nf-form-content label,
  .nf-field-label .nf-label-span {
    font-size: var(--font-size-base) !important;
    font-weight: 500 !important;
    color: var(--color-midnight) !important;
  }
  
  .nf-field-description p, .nf-field-description p em {
    font-size: var(--font-size-sm) !important;
    color: var(--color-midnight) !important;
  }
  
  .nf-field-description {
    padding-bottom: 10px !important;
  }
  .nf-form-content .label-above .nf-field-label {
    margin-bottom: var(--spacing-xs) !important;
  }
  
  .nf-form-content input:not([type=submit]), 
  .nf-form-content textarea,
  .nf-form-content select,
  .nf-error textarea.ninja-forms-field {
    border-radius: var(--border-radius) !important;
    background-color: var(--color-light-grey) !important;
    padding: var(--spacing-sm) !important;
    color: var(--color-midnight) !important;
    font-size: var(--font-size-base);
    border-width: 1px !important;
    border-color: var(--color-light-grey) !important;
  }
  
  /* Form Autofill Styles */
  .nf-form-content input:-webkit-autofill,
  .nf-form-content input:-webkit-autofill:hover, 
  .nf-form-content input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--color-midnight);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 60px var(--color-light-grey) !important;
  }
  
  .nf-form-content input:-webkit-autofill:focus {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--color-midnight);
    box-shadow: inset 0 0 20px 60px var(--color-light-grey) !important;
  }
  
  /* Light Form Variant */
  .form-light .nf-form-content input:not([type=submit]), 
  .form-light .nf-form-content textarea,
  .form-light .nf-error textarea.ninja-forms-field {
    background-color: transparent !important;
    color: var(--color-white) !important;
    border-color: var(--color-white) !important;
  }
  
  .form-light .nf-response-msg {
    border: 1px solid var(--color-white);
  }
  
  /* ==========================================================================
   Other
   ========================================================================== */
  /* Hide */
  @media (max-width: 768px) {
    .hide-on-mobile {
      display: none;
    }
  }
  
  @media (min-width: 769px) {
    .hide-on-desktop {
      display: none;
    }
  }
  
  /* Reverse */
  @media (max-width: 980px) {
    .reverse-columns-mobile {
      display: flex;
      flex-direction: column-reverse;
    }
  }
  
  /* gutenberg styles */
  h2.wp-block-heading {
    font-family: 'Blinker', Helvetica, Arial, Lucida, sans-serif;
    font-weight: 200;
    color: var(--color-marigold) !important;
    font-size: 42px;
    line-height: 1.2em;
  }
  
  p.wp-block-paragraph {
      color:  var(--color-midnight) !important;
      font-weight: 500 !important;
  }