/*
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:"stevie-sans", sans-serif;
  --secondary-font-app:"cormorant-garamond", 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 */

  --step--2: clamp(0.72rem, 0.8041rem + -0.0701vw, 0.7901rem);
  --step--1: clamp(0.8889rem, 0.8867rem + 0.0111vw, 0.9rem);
  --step-0: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.0688rem + 0.2813vw, 1.4063rem);
  --step-2: clamp(1.2656rem, 1.1672rem + 0.4922vw, 1.7578rem);
  --step-3: clamp(1.4238rem, 1.2691rem + 0.7734vw, 2.1973rem);
  --step-4: clamp(1.6018rem, 1.3729rem + 1.1448vw, 2.7466rem);
  --step-5: clamp(1.802rem, 1.4758rem + 1.6312vw, 3.4332rem);

}

body {

  font-size: var(--step-0);
  color: var(--dark-color-app);
  font-family: var(--primary-font-app);
  font-weight: var(--light-weight-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);*/

    /*& strong { font-weight: var(--semibold-weight-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(--primary-font-app);
        font-size: var(--step-1);
        font-weight: var(--bold-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);
}

body 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;

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

.c-header__phone:active, .c-header__phone:focus, .c-header__phone:hover { color:var(--secondary-light-color-app); }


    /*MISC: if logged in, remove <a> style*/
    #wpadminbar a{
        color: unset;
        position: unset;
        text-decoration: unset;
        text-decoration-thickness: unset;
        text-decoration-color: unset;
        text-underline-offset: unset;
        &::before {
          content: unset;
          position: unset;
          width:unset;
          height: unset;
          border-radius: unset;
          background-color: unset;
          bottom: unset;
          left: unset;
          transform-origin: unset;
          transform:unset;
          transition: unset;
        }
    }

/*================*/
/*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-m-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);
    }
}

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

        &.u-color--inherit {
            color: unset;
        }
    }
}
section{
    .c-item,
    .c-basic, 
    .c-columns {
        h1, h2 {
            &: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:1px solid var(--secondary-color-app);
    border-radius: 3rem;
    font-size: calc(var(--step-0) * 0.9);
    font-weight: var(--regular-weight-app);
    text-transform: capitalize;
    letter-spacing:var(--lspace-p-s-app);
    background-color: var(--primary-dark-color-app); 
    padding: var(--spacer-xxs-app)  var(--spacer-xs-app);

    &:hover, &:focus{
        background-color: var(--primary-color-app); 
        &::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,&:focus {
            opacity: 0.7;
            color: inherit;
        }
    }
}
@media screen and (max-width:767px) {
    .c-footer {
        padding-bottom: var(--spacer-l-app);
    }
}

/*================================================*/
/* OFFCANVAS MENU - MOBILE ONLY (1024px breakpoint) */
/*================================================*/
/*
 * Offcanvas menu shows when phone icon displays left of logo (<1024px).
 * Matches u-visibility-hidden-md--up breakpoint.
 * On desktop (≥1024px), nav displays as horizontal inline menu.
 * Search for "OFFCANVAS" to find this section.
 */

/* Desktop (≥1024px): Show horizontal nav, hide offcanvas UI */
@media (min-width: 1024px) {
  /* Nav right against logo, no gap (override .c-header__inside space-between) */
  .c-header--offcanvas-mobile .c-header__inside {
    justify-content: flex-start;
    gap: 0;
  }
  .c-header--offcanvas-mobile .c-header__inside .c-logo {
    margin-right: 0;
  }
  .c-header--offcanvas-mobile .c-header__inside .c-nav {
    margin-left: 0;
    flex: 1;
    min-width: 0;
  }

  .c-header--offcanvas-mobile .c-nav__toggle--open,
  .c-header--offcanvas-mobile .c-nav__toggle--close,
  .c-header--offcanvas-mobile .c-nav__mask {
    display: none !important;
  }

  .c-header--offcanvas-mobile .c-nav {
    position: static;
    width: auto;
    transform: none;
    overflow: initial;
    visibility: visible;
    background-color: transparent;
  }

  .c-header--offcanvas-mobile .c-nav__list {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-end;
    width: 100%;
  }

  .c-header--offcanvas-mobile .c-nav__link {
    border: 0;
    padding: 10px;
    font-size: var(--step-0);
    color: var(--text-color);
  }

  .c-header--offcanvas-mobile .c-nav__link:hover,
  .c-header--offcanvas-mobile .c-nav__link:focus {
    color: var(--hover-color);
  }

  /* Hide mobile-only nav content (phone, CTA, social) on desktop */
  .c-header--offcanvas-mobile .c-nav .u-text--center.u-block-padding--sm {
    display: none;
  }

  /* Submenu dropdown / mega menu - span full width to align with logo */
  .c-header--offcanvas-mobile .c-header__logo {
    position: relative;
  }

  .c-header--offcanvas-mobile .c-header__logo .o-container {
    position: relative;
  }

  .c-header--offcanvas-mobile .c-nav__item {
    position: static !important;
  }

  .c-header--offcanvas-mobile .c-nav__dropdown {
    position: absolute !important;
    top: 100%;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 250px;
    background-color: var(--dropdown-bg-color);
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .c-header--offcanvas-mobile .c-nav__item:hover > .c-nav__dropdown {
    display: block;
  }

  .c-header--offcanvas-mobile .c-nav__dropdown--toggle {
    display: none;
  }
}

/* Logo at top of offcanvas menu (visible only below 1024px via u-visibility-hidden-md--up) */
@media (max-width: 1023px) {
  .c-header--offcanvas-mobile .c-nav__logo {
    display: block;
    padding: 30px 20px 20px;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .c-header--offcanvas-mobile .c-nav__logo img {
    display: inline-block;
    width: auto;
    height: auto;
    max-height: 60px;
    object-fit: contain;
  }
}

/* Mobile (<1024px): Keep offcanvas behavior (handled by parent theme) */

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

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

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