/* 2025 change over from Dundee Precious to DPM Metals */
html,
body {
  font-family: Arial;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: theme("colors.brand-gold.regular");
  font-family: Oswald;
  line-height: theme("lineHeight.normal");
  &.center-lead {
    display: inline-block;
    position: relative;
    transition: 0.5s;
    padding-bottom: 15px;
    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -0.05em;
      left: 0;
      right: 0;
      margin: 0 auto;
      --s: 2px; /* the thickness of the line */
      --c: theme("colors.brand-gold.regular"); /* the color */
      width: 110px;
      height: var(--s);
      --_a: 110px;
      padding-bottom: var(--s);
      background: linear-gradient(90deg, var(--c) 100%, #fff 0)
          calc(100% - var(--_a, 0%)) / 200% 100%,
        linear-gradient(var(--c) 0 0) 0% 100% / var(--_a, 0%) var(--s) no-repeat;
      -webkit-background-clip: text, padding-box;
      background-clip: text, padding-box;
      transition: 0.5s;
      height: var(--s);
    }
    &.hover:hover {
      &::after {
        --_a: 50%;
      }
    }
    &.alt {
      --c: #fff;
      &::after {
        --c: #fff; /* the color */
      }
    }
  }
  &.lead {
    display: inline-block;
    position: relative;
    font-weight: 700;
    transition: 0.5s;
    padding-bottom: 10px;
    &::after {
      content: "";
      display: block;
      position: absolute;
      bottom: -0.05em;
      left: 0;
      --s: 2px; /* the thickness of the line */
      --c: theme("colors.brand-gold.regular"); /* the color */
      width: 110px;
      height: var(--s);
      --_a: 110px;
      padding-bottom: var(--s);
      background: linear-gradient(90deg, var(--c) 100%, #fff 0)
          calc(100% - var(--_a, 0%)) / 200% 100%,
        linear-gradient(var(--c) 0 0) 0% 100% / var(--_a, 0%) var(--s) no-repeat;
      -webkit-background-clip: text, padding-box;
      background-clip: text, padding-box;
      transition: 0.5s;
      height: var(--s);
    }
    &.hover:hover {
      &::after {
        --_a: 50%;
      }
    }
    &.alt {
      --c: #fff;
      &::after {
        --c: #fff; /* the color */
      }
    }
  }
}

h1 {
  font-family: Oswald;
  font-size: theme("fontSize.4xl");
  margin: 0;
}

h2 {
  font-family: Oswald;
  font-size: theme("fontSize.2xl");
  font-weight: 300;
  margin: 0;
}

h3 {
  font-family: Oswald;
  font-size: theme("fontSize.xl");
  margin: 0 0 theme("spacing.2") 0;
  font-weight: 300;
}

h4 {
  font-family: Arial;
  font-size: theme("fontSize.xl");
  margin: 0;
}


header.sub {
  border-top: solid theme("colors.brand-gold.regular") theme("spacing.1");
  border-bottom: 1px solid theme("colors.brand-gold.regular");
  z-index: 999;}
  
 header.sub .brand {
     width: 150px;
  }
  
  header.scrolled {
  border-bottom: 1px solid theme("colors.brand-gold.regular");
  }
  
 header.scrolled nav{
    padding-top: 0.7rem;
  }
 
 /* 
 header.scrolled .uk-dropdown {
    top: 84px!important;
  }
 */ 


.home-page header.scrolled .brand { width: 200px;}

/* Navigation */
.nav>li a {
    color: #444954;
    display: inline-block;
    font-size: .875rem;
    padding-bottom: .25rem;
    padding-top: .25rem;
    position: relative;
}

.nav a:hover {
    --_p: 70%;
    --_a: 100%;
    color: #B6523D;
    text-decoration: none;
}

.nav li.uk-active>a {
    --_p: 70%;
    --_a: 100%;
    color: #B6523D;
    text-decoration: none;
}

.nav .uk-dropdown-nav li a {
    font-weight: 300;
    font-size: 1.09rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: #444954;
}

.nav.sub-nav li.uk-active>a {
    color: #B6523D;
}

.nav ul a {
    font-family: Arial,sans-serif;
}

/* font colours */

.text-brand-gold-regular {
    --tw-text-opacity: 1;
    color: #F0B323;
    color: rgb(240, 179, 35, var(--tw-text-opacity));
    
}
    
.text-brand-gold-dark {
    --tw-text-opacity: 1;
    color: #917018;
    color: rgb(145, 112, 24, var(--tw-text-opacity));
}
    /* dark blue is now slate grey */
.text-brand-blue-dark {
    --tw-text-opacity: 1;
    color: #444954;
    color: rgb(68, 73, 84, var(--tw-text-opacity));
}
 /* same as above - req'd for feature squares */
.text-brand-slate {
    --tw-text-opacity: 1;
    color: #444954;
    color: rgb(68, 73, 84, var(--tw-text-opacity));
}

/* same as above - needed for conversion */
.text-brand-blue-regular {
    --tw-text-opacity: 1;
    color: #444954;
    color: rgb(68, 73, 84, var(--tw-text-opacity));
}

.text-brand-gold {
    --tw-text-opacity: 1;
    color: #F0B323;
    color: rgb(240, 179, 35, var(--tw-text-opacity));
    
}

.text-brand-blue {
    --tw-text-opacity: 1;
    color: #59cbe8;
    color: rgb(89, 203, 232, var(--tw-text-opacity));
    
}

.text-brand-blue-medium {
    --tw-text-opacity: 1;
    color: #0076a5;
    color: rgb(0, 118, 165, var(--tw-text-opacity));
}

.text-brand-copper-dark {
    --tw-text-opacity: 1;
    color: #b6523D;
    color: rgb(182, 82, 61, var(--tw-text-opacity));
}

.text-brand-leaf-green {
    --tw-text-opacity: 1;
    color: #93c90e;
    color: rgb(147,201,14, var(--tw-text-opacity));
}


.text-brand-green-dark {
    --tw-text-opacity: 1;
    color: #5E7E29;
    color: rgb(94, 126, 41, var(--tw-text-opacity));
}

.text-body-alt {
    color: #0D4B8F;
}

.text-brand-green-header {
    color: #87c22c;
}

/* now slate */
.text-brand-blue-link {
    color: #444954;
}

.text-brand-dark-green-link {
    color: #53732a;
}

 /* background & border colours */
 
   /* dark blue is now slate grey */
.bg-brand-blue-dark\/80 {
    background-color: rgba(68, 73, 84,.8);
} 
 
.hover\:bg-brand-blue-dark:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(68, 73, 84, var(--tw-bg-opacity));
} 
 
.bg-brand-blue-dark\/30 {
    background-color: rgba(68, 73, 84,.3);
}

.bg-brand-slate {
    background-color: rgba(68, 73, 84);
} 

.bg-brand-blue-regular {
    --tw-bg-opacity: 1;
    background-color: rgb(0, 118, 165, var(--tw-bg-opacity));
}

.group:hover .group-hover\:bg-brand-blue-link {
    --tw-bg-opacity: 1;
    background-color: rgb(0,118,165, var(--tw-bg-opacity));
}

.bg-brand-blue-light {
    --tw-bg-opacity: 1;
    background-color: rgb(89, 203, 232,var(--tw-bg-opacity));
}

.bg-brand-leaf-green {
    --tw-bg-opacity: 1;
    background-color: rgb(147, 201, 14, var(--tw-bg-opacity));
}

.bg-brand-green-dark{   
    --tw-bg-opacity: 1;
    background-color: rgb(94, 126, 41, var(--tw-bg-opacity));
}

.bg-brand-silver {
    --tw-bg-opacity: 1;
    background-color: rgb(167, 168, 170, var(--tw-bg-opacity));
}

.bg-brand-light-grey {
    background-color: #F7F7F7;
}

.bg-brand-gold-regular {
    --tw-bg-opacity: 1;
    background-color: rgb(240, 179, 35, var(--tw-bg-opacity));
}
/* same as above, both needed */
.bg-brand-gold {
    --tw-bg-opacity: 1;
    background-color: rgb(240, 179, 35, var(--tw-bg-opacity));
}

.bg-brand-gold-dark{
    --tw-bg-opacity: 1;
    background-color: rgb(145,112,24, var(--tw-bg-opacity));
}


.bg-brand-copper {
    --tw-bg-opacity: 1;
    background-color: rgb(219, 122, 81, var(--tw-bg-opacity));
}

.bg-brand-copper-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(182, 82, 61, var(--tw-bg-opacity));
}

.border-brand-gold-regular {
    --tw-border-opacity: 1;
    border-color: rgb(240, 179, 35, var(--tw-border-opacity));
}

.border-brand-gold {
    border-color: rgb(240, 179, 35);
    padding-bottom: .5rem;
}

.border-brand-blue {
    border-color: rgb(89, 203, 232);
    padding-bottom: .5rem;
}

.border-brand-leaf-green {
   border-color: rgb(147, 201, 14);
   padding-bottom: .5rem;
}

.border-brand-copper-dark {
    border-color: rgb(182, 82, 61);
    padding-bottom: .5rem;
}

.border-brand-slate {
   border-color: rgb(68, 73, 84);
   padding-bottom: .5rem;
}

.list-arrows li {
    background-image: url(/site/templates/build/img/square-bullet.svg);
    background-size: 12px;
    background-position: 0% 8px;
}


a:hover {
    color: #f0b41c;
    text-decoration: none;
}

.uk-accordion-title:hover {
    color: #93c90e;
}

.content a {
    color: #b6523D;
}

.content a:hover {
    color: #F0B323;
}

.content .modal-links a {
    color: #fff;
}

.content .modal-links a:hover {
    color: #F0B323;
}

.content h3 {
    font-weight: 300;
}

.bio-photo {
    margin-left: 0px !important; 
    padding: 5px;
}

.uk-modal {
    background: #fff;
}

#events-switcher li.uk-active {
    background: #444954;
}

#events-switcher li {
    background: #a7a8aa;

}

@media screen and (min-width: 1280px) {
    header.sub .brand {width: 400px;}
    header.sub.scrolled .brand { width: 300px; }
    .home-page header.scrolled .brand { width: 300px;}
  }
  
@media screen and (min-width: 1024px){
    header.sub .brand { width: 300px;}
    header.sub.scrolled .brand {width: 200px;}
}
  
 @media screen and (max-width: 760px){
    header.sub .brand {width: 400px;} 
    header.sub.scrolled .brand {width: 300px;}
    
 }

/**
 * Home stuff
 */
.svg-hover{
  fill: #fff;
  svg{
    width: 60px;
    height: 80px;
  }
}
.svg-hover:hover{
  .svg-fill{
    /*fill: theme("colors.brand-gold.regular")!important;*/
    fill: #E1785A !important;
  }
  span{
    line-height: 1!important;
  }
}

#subscribe-cta a:hover {
    background-color: rgba(68, 73, 84);
    color: #fff;
    text-decoration: none;
}


/* remove sun and line from above nav */
.nav>li a:before {
    content: url(/site/templates/src/img/sun.svg);
    display: none;
    left: 50%;
    position: absolute;
    top: -4px;
    -webkit-transform: translate(-50%,-50%) scaleY(0);
    -ms-transform: translate(-50%,-50%) scaleY(0);
    transform: translate(-50%,-50%) scaleY(0);
    -webkit-transition: .3s;
    transition: .3s;
}

.nav>li a:after {
    --s: 0.2em;
   /* --c: #e8a428;*/
   --c: #f0b32300;
    background: -webkit-gradient(linear,left top,right top,color-stop(100%,var(--c)),color-stop(0,#fff)) calc(100% - var(--_a, 0%))/200% 100%,-webkit-gradient(linear,left top,left bottom,color-stop(0,var(--c))) 0 100%/var(--_a,0) var(--s) no-repeat;
    background: linear-gradient(90deg,var(--c) 100%,#fff 0) calc(100% - var(--_a, 0%))/200% 100%,linear-gradient(var(--c) 0 0) 0 100%/var(--_a,0) var(--s) no-repeat;
    -webkit-background-clip: text,padding-box;
    background-clip: text,padding-box;
    content: "";
    display: block;
    height: var(--s);
    left: 0;
    padding-bottom: var(--s);
    position: absolute;
    top: 0;
    width: 100%;
}


.social li a {
    align-items: center;
    background: #93c90e;
    color: #444954;
    border-radius: 0%;
    display: flex;
    height: 36px;
    justify-content: center;
    padding: 6px;
    width: 36px;
}

.social li a:hover {
    background: #fff;
}