/*
declare primary and secondary colors. If needed, declare tertiary.
*/
:root {
  --primary-color-app:#0b47d4;
  --primary-dark-color-app:#092866;
  --primary-light-color-app:#dfebf6;
  --primary-gradient-color-app: linear-gradient(to right, #0b47d4, #092866, #dfebf6, #0b47d4);
  
  --secondary-color-app:#f0ad37;
  --secondary-dark-color-app:#423B3A;
  --secondary-light-color-app:#e5dad6;
  --secondary-gradient-color-app: linear-gradient(to right, #f0ad37, #e5dad6, #423B3A, #f0ad37);
  
  --light-color-app: #F3EEEC;
  --dark-color-app:#121212;
  
  --base-light-color-app:#FFFFFF;
  --base-dark-color-app:#000000;
/*
declare the primary and secondary fonts. If needed, declare tertiary.
Note the variable font declaration. with font-optical-sizing: auto
Also update the font weight.

font-family: "ambroise-std", serif;
font-weight: 300;
font-style: normal;

font-family: "haboro-contrast-normal", sans-serif;
font-weight: 300;
font-style: normal;

*/
  --primary-font-app:"DM Sans", sans-serif;
  --secondary-font-app:"DM Sans", sans-serif;

  --light-weight-app:300;
  --regular-weight-app:400;
  --semibold-weight-app:500;
  --bold-weight-app:600;
/*
declare the type scale. Include the URL link reference so the type can be updated easily when necessary.
*/
/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1920,18,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
}

:root {

/* @link https://utopia.fyi/type/calculator?c=320,17,1.125,1920,18,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
  --step--2: clamp(0.6331rem, 0.8808rem + -0.2064vw, 0.8395rem);
  --step--1: clamp(0.844rem, 0.9645rem + -0.1005vw, 0.9444rem);
  --step-0: clamp(1.0625rem, 1.05rem + 0.0625vw, 1.125rem);
  --step-1: clamp(1.1953rem, 1.1345rem + 0.3043vw, 1.4996rem);
  --step-2: clamp(1.3447rem, 1.2139rem + 0.6543vw, 1.999rem);
  --step-3: clamp(1.5128rem, 1.2824rem + 1.1518vw, 2.6647rem);
  --step-4: clamp(1.7019rem, 1.3319rem + 1.8501vw, 3.552rem);
  --step-5: clamp(1.9147rem, 1.3506rem + 2.8202vw, 4.7348rem);

}

body {
  font-family: var(--primary-font-app);
  font-optical-sizing: auto;
  font-size: var(--step--1);
  font-weight: var(--light-weight-app);
  color: var(--dark-color-app);
  line-height: var(--line-l-app);
}

p {
    margin-top: var(--spacer-s-app);
    margin-bottom: var(--spacer-s-app);
}

.u-h1, 
.u-h2, 
.u-h3, 
.u-h4, 
.u-h5, 
.u-h6, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
/*    color: var(--primary-color-app);*/
    font-family: var(--secondary-font-app);
    font-weight: var(--light-weight-app);
    line-height: var(--line-s-app);
    margin-bottom: var(--spacer-s-app);
    margin-top:  var(--spacer-s-app) ;
    letter-spacing: var(--lspace-p-s-app);

}
h1.u-color--light,
h2.u-color--light,
h3.u-color--light,
h4.u-color--light,
h5.u-color--light,
h6.u-color--light {
    color: var(--primary-light-color-app);
}


.u-h1, .u-text--xxl, h1 {
    font-size: var(--step-5);
}

  /*hide heading title*/
  .u-visibility--sr-only {
  }

    .u-text--subtitle {
        font-family: var(--secondary-font-app);
        font-size: var(--step-1);
        font-weight: var(--semibold-weight-app);
        letter-spacing: var(--lspace-p-app);
        margin-bottom: var(--spacer-s-app);
        text-transform: uppercase;
        text-wrap: balance;
    }
    
.u-h2, .u-text--xl, h2 {
    font-size: var(--step-4);
}

.u-h3, .u-text--lg, h3 {
    font-size: var(--step-3);
}

h4, h5, h6,
.u-h4, .u-h5, .u-h6 {
    line-height: var(--line-m-app);

}
.u-h4, .u-text--md, h4 {
    font-size: var(--step-2);
    letter-spacing: var(--lspace-p-m-app);
}

.u-h5, .u-text--sm, h5 {
    font-size: var(--step-1);
    letter-spacing: var(--lspace-p-s-app);
}

.u-h6, .u-text--xs, h6 {
    font-size: var(--step--1);
    letter-spacing: var(--lspace-p-s-app);
}

.u-text--xxs, small {
    font-size: var(--step--2);
    letter-spacing: var(--lspace-p-s-app);

}

.u-block-heading--group {
    h1, 
    h2, 
    h3, 
    h4, 
    h5, 
    h6 {
        margin-top: 0;
        margin-bottom: var(--spacer-xs-app);
    }
    .u-text--subtitle {
        margin-top: var(--spacer-xs-app);
    }
}
@media (max-width:767px) {
    h1, .c-theme--light h1 {
        margin-top: 0;
    }
    h2, h3, h4, h5, h6,
    .u-h1, .u-h2, .u-h3, .u-h4, .u-h5, .u-h6 {
        margin-top: calc(var(--spacer-vm-s-app) * 0.5);
        margin-bottom: var(--spacer-vm-m-app);
/*        font-weight: var(--semibold-weight-app);*/
    }
    p, ul, ol {
        margin-top:  var(--spacer-xs-app);
        margin-bottom: var(--spacer-xs-app);
    }
}


/*line break*/
hr {
    border-color: var(--secondary-color-app);
}

a {

    color: inherit;
    position: relative;
    text-decoration: underline;
    text-decoration-thickness: 0.01rem;
    text-decoration-color: inherit;
    text-underline-offset: 0.3rem;

    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      border-radius: 1px;
      background-color: var(--secondary-color-app);
      bottom: -0.2rem;
      left: 0;
      transform-origin: right;
      transform: scaleX(0);
      transition: transform .3s ease-in-out;
    }
    &:hover{

    text-decoration: none;
    }
    &:hover::before {
      transform-origin: left;
      transform: scaleX(1);
    }
}

    /*MISC: if logged in, remove <a> style*/
    #wpadminbar a{
        &::before {
          content: '';
          position: inherit;
          width:inherit;
          height: inherit;
          border-radius: inherit;
          background-color: inherit;
          bottom: inherit;
          left: inherit;
          transform-origin: none;
          transform:none;
          transition: none;
        }
    }

/*================*/
/*font family */
/*================*/
.u-font--primary {
    font-family: var(--primary-font-app);
}

.u-font--secondary {
    font-family: var(--secondary-font-app);
    font-weight: var(--regular-weight-app);
}

/*================*/
/*font color */
/*================*/
.u-color--base {
    color: var(--base-dark-color-app);
}
.u-color--base-light {
    color: var(--base-light-color-app);
}

.u-color--primary{
    color: var(--primary-color-app);
}
.u-color--primary-dark{
    color: var(--primary-dark-color-app);
}
.u-color--primary-light{
    color: var(--primary-light-color-app);
}

.u-color--secondary {
    color: var(--secondary-color-app);
}
.u-color--secondary-dark {
    color: var(--secondary-dark-color-app);
}
.u-color--secondary-light {
    color: var(--secondary-light-color-app);
}

.c-basic--light,
.u-color--white,
.u-text--white{
    color: var(--base-light-color-app);
}

.u-color--inherit, 
.u-color--reset {
    color: inherit;
}

.c-basic--dark,
.u-color--black,
.u-text--black {
    color: var(--base-dark-color-app);
}

/*================*/
/*font weight */
/*================*/
.u-text--light {
    font-weight: var(--light-weight-app);
}

.u-text--regular {
    font-weight: var(--regular-weight-app);
}

.u-text--semibold {
    font-weight: var(--semibold-weight-app);
}

b, strong, .u-text--bold {
    font-weight: var(--bold-weight-app);
}

/*================*/
/*adjust padding and margins */
/*================*/
.c-block-padding-square--xl {
    padding:  var(--spacer-vh-xl-app);
}
.c-block-padding-square--lg {
    padding:  var(--spacer-vh-l-app);
}
.c-block-padding-square--md {
    padding: var(--spacer-vh-m-app);
}
.c-block-padding-square--sm {
    padding:  var(--spacer-vh-s-app);
}
.c-block--width {
    padding: var(--spacer-vw-m-app);
    max-width:var(--text-width-s-app);
}
@media (max-width:1023px) {
    .c-block--padding, 
    .c-block--width {
        padding: var(--spacer-vh-l-app);
    }

    .o-col--xxs-12>.c-block--padding {
        padding: var(--spacer-vh-l-app) calc(var(--spacer-vh-l-app) - 15px);
    }

}

@media (max-width:767px) {
    .c-block--width {
        padding: var(--spacer-vh-l-app) 15px !important;
    }
}

/*================*/
/* utility for type */
/*================*/

.u-text--balance {
    text-wrap: balance;
}
.u-text--lead {
    font-size: var(--step-1);
}

ul {
    list-style: circle;
    margin-right: 0;

    &.u-list--none {
        list-style: none;
        padding-left: 0;
        margin-left: 0;
        line-height: var(--line-m-app);
/*        text-align: center;*/
        min-width: 286px;
        & li {
        margin-bottom: var(--spacer-xxs-app);
        padding-bottom: var(--spacer-xxs-app);
            & a {
                color:inherit;
            }
        }
    }
}


ol {
    padding-left: var(--spacer-s-app);
    padding-right: var(--spacer-s-app);
    & li {
        padding-left: var(--spacer-xs-app);
        margin-bottom:  var(--spacer-s-app);
    }
}

section{
    .c-item,
    .c-basic, 
    .c-columns {
        h1, h2, h3 {
            &:first-of-type {
                margin-top:   var(--spacer-xxs-app);
            }
            &:last-of-type {
                margin-bottom: var(--spacer-xxs-app);
            }
        }
    }
}
.blog,
.category {

        h1, h2, h3, p {
            &:first-of-type {
                margin-top:   var(--spacer-xxs-app);
            }
            &:last-of-type {
                margin-bottom: var(--spacer-xxs-app);
            }
        }
}

.blog,
.category,
.single {
    h1, 
    h2, 
    h3, 
    h4, 
    h5, 
    h6 {
        color: var(--primary-color-app);
    }
}


.c-disclaimer {
    font-size: calc(var(--step--2) * 0.7);
    font-weight: var(--light-weight-app);
    text-transform: uppercase;
}

a, 
button,
.c-btn {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.c-btn {
    border-radius: 3rem;
    font-size: calc(var(--step-0) *0.9);
    text-transform: capitalize;
    letter-spacing:var(--lspace-p-s-app);
    background-color: var(--primary-dark-color-app); 

    &:hover::before {
      transform-origin: left;
      transform: scaleX(0);
    }
}

/*override class styles*/

.c-hero-full__spacing {
  padding: clamp(var(--spacer-xs-app), var(--spacer-s-app), var(--spacer-l-app));
}
@media (max-width:767px) {
  .c-hero-full__spacing {
    text-align: center;
  }
}
.default .c-nav__link {
  text-transform: none;
  font-size: var(--step--1);
}

/*================================================*/
/*overlay block */
/*================================================*/
.c-overlay__content {
    padding:3vmin;
    min-width: 100%;
}
.c-overlay__featured {
    min-width: 100%;
}
.c-overlay__item {
    width: 100%;
}
.c-overlay__title {
    background: linear-gradient(transparent,rgba(9, 40, 102, 0.9));
/*    min-height:50%;*/
    text-shadow: var(--text-shadow-dark-app);
}

.u-block--black {
    background-color: var(--primary-dark-color-app);
}

/*Footer Phone*/
.c-contact__phone {
    display: inline;
    line-height: 1.2;
    font-family: inherit;
    font-size: var(--step-3);
    color: inherit;
    span{display: inline;}
}

@media (min-width: 1024px) {
    .c-contact__phone {
        font-size: var(--step-3);
    }
}

.c-contact .c-social__list {
    margin-top:  var(--spacer-xs-app);
    margin-bottom:  var(--spacer-s-app);
}

.c-footer__links li:not(:last-child):after {
    content: '|';
    margin: 0 5px;
    color: inherit;
}
.c-footer__links li:not(:last-child) a:after {
    content: '';
    margin: 0;
    color: inherit;
}

/*================================================*/
/*footer */
/*================================================*/
.c-footer {
/*    font-weight: var(--semibold-weight-app);*/
    font-size: var(--step--1);
    padding: var(--spacer-vm-m-app) 0 var(--spacer-vm-xl-app);
/*    text-transform: uppercase;*/

    .c-footer__logo {
        margin: 0 auto var(--spacer-s-app);
        max-width: 200px;
        float: right;
    }
    @media (max-width: 767px) {
        .c-footer__logo {
            float: none;
            margin: 0 auto var(--spacer-xxs-app);
        }
    }
    .c-footer__content a {
        font-weight: var(--semibold-weight-app);
        text-decoration: none;
        text-transform: uppercase;

        &:hover {
            opacity: 0.7;
        }
    }
}
@media screen and (max-width:767px) {
    .c-footer {
        padding-bottom: var(--spacer-l-app);
    }
}

/*================================================*/
/*adjust drawer form */
/*================================================*/

.c-drawer__form-wrap {
  right: 8px; 
  margin-bottom: 5px;

  & .c-drawer__form-header {
    border:1px solid var(--secondary-color-app);
    border-radius: 3rem;
    font-size: calc(var(--step--1) *0.8);
    text-transform: capitalize;
    background-color: var(--primary-dark-color-app); 
    &:hover {
      background-color: var(--primary-color-app); 
    }
  }
}


.dm-sans-<uniquifier> {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}