/* ================================== *//* ================================== *//* ================================== */
/*            CUSTOM.CSS              *//* ================================== *//* ================================== */
/*       Theme specific styling       *//* ================================== *//* ================================== */
/* ================================== *//* ================================== *//* ================================== */



/* ================================== *//* ================================== */
/* == ROOT Variables ================ *//* ================================== */
/* ================================== *//* ================================== */


@font-face {
  font-family: 'Signika';
  src: url('/assets/fonts/signika-variable.ttf') format('truetype');
}

@font-face {
  font-family: 'Geologica';
  src: url('/assets/fonts/geologica-variable.ttf') format('truetype');
}

:root {
   /* ================================== */
   /* == Theme variables =============== */
   /* ================================== */
   
   /* Primary Shades *//* Should be light colors */
   /* Clean */
   --color-light-100: rgb(249, 250, 251);
   --color-light-200: rgb(226, 228, 233);
   --color-light-300: rgb(212, 215, 221);
   --color-light-400: rgb(155, 162, 176);
   --color-light-500: rgb(101, 110, 129);
   /* Raw */
   --color-light-100-raw: 249, 250, 251;
   --color-light-200-raw: 226, 228, 233;
   --color-light-300-raw: 212, 215, 221;
   --color-light-400-raw: 155, 162, 176;
   --color-light-500-raw: 101, 110, 129;

   /* Secondary Shades *//* Should be dark colors */
   /* Clean */
   --color-dark-100: rgb(25, 25, 30);
   --color-dark-200: rgb(21, 21, 25);
   --color-dark-300: rgb(16, 16, 19);
   --color-dark-400: rgb(10, 10, 12);
   --color-dark-500: rgb(4, 4, 5);
   /* Raw */
   --color-dark-100-raw: 25, 25, 30;
   --color-dark-200-raw: 21, 21, 25;
   --color-dark-300-raw: 16, 16, 19;
   --color-dark-400-raw: 10, 10, 12;
   --color-dark-500-raw: 0, 0, 0;

   /* Tertiary Shades *//* Should be accent/theme colors */
   /* Clean */
   --color-primary-100: rgb(198, 166, 100); 
   --color-primary-200: rgb(176, 147, 89);  
   --color-primary-300: rgb(153, 128, 78);  
   --color-primary-400: rgb(130, 109, 67);  
   --color-primary-500: rgb(107, 90, 56);   
   /* Raw */
   --color-primary-100-raw: 198, 166, 100;
   --color-primary-200-raw: 176, 147, 89;
   --color-primary-300-raw: 153, 128, 78;
   --color-primary-400-raw: 130, 109, 67;
   --color-primary-500-raw: 107, 90, 56;

   /* secondary Shades *//* Should be accent/theme colors */
   /* Clean */
   --color-secondary-100: rgb(255, 3, 62); 
   --color-secondary-200: rgb(224, 4, 54);
   --color-secondary-300: rgb(194, 4, 48);
   --color-secondary-400: rgb(158, 4, 40);
   --color-secondary-500: rgb(122, 3, 31); 
   /* Raw */
   --color-secondary-100-raw: 255, 131, 131;
   --color-secondary-200-raw: 245, 96, 96;
   --color-secondary-300-raw: 204, 72, 72;
   --color-secondary-400-raw: 153, 49, 49;
   --color-secondary-500-raw: 102, 33, 33;

   /* ================================== */
   /* == Font variables ================ */
   /* ================================== */

   --primary-font: "Geologica";
   --secondary-font: "Signika";
   --tertiary-font: ;

   /* ================================== */
   /* == Utility variables ============= */
   /* ================================== */

   --shadow-tiny: rgba(0, 0, 0, 0.05) 0px 1px 1px, rgba(0, 0, 0, 0.08) 0px 1px 2px;
	--shadow-small: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
	--shadow-medium: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
	--shadow-large: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
	--shadow-extra: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
   --shadow-super: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
   --shadow-extreme: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
   --shadow-blur: 0 0 20px rgba(0, 0, 0, 0.1);
   --shadow-blur-medium: 0 0 20px rgba(19, 19, 19, 0.2);
   --shadow-blur-heavy: 0 0 30px rgba(19, 19, 19, 0.9);
}



/* ================================== *//* ================================== */
/* ============= STYLING ============ *//* ================================== */
/* ================================== *//* ================================== */


/* ================================== */
/* == Custom overrides ================ */
/* ================================== */


.section.banner-hero {
   padding-top: 275px;
}

.section.banner-hero.hero-alt {
   padding-top: 200px;
}

.section.banner-hero video, .section.s404 video {
   position: absolute;
   top:0; right:0; bottom:0; left:0; 
   width: 100%; height: 100%;
   object-fit: cover;   
   z-index: 0;         
   pointer-events: none;
   filter: none;        
}

.section.banner-hero:after {
   content: '';
   position: absolute; top: 0; left: 0;
   width: 100%; height: 100%;
   background-color: var(--color-dark-500);
   opacity: 0.35;
}

.section.banner-hero .inner {
   margin: auto; text-align: center;
   gap: 1.25rem; max-width: 900px; padding: 1rem;
   flex: unset;
   justify-content: center; align-items: center; text-align: center;
   margin-bottom: 2rem;
}

.section.banner-hero .inner .horizontal-wrapper {
   margin-top: 1rem;
   justify-content: center;
}

.banner-hero .banner-image-wrapper {
   display: none; visibility: hidden;
}

.card.card-glass {
   backdrop-filter: blur(2px);
}

@media screen and (max-width: 880px) {
   .section.banner-hero {
      padding-top: 250px;
      background: url('/assets/media/uploads/banner-alt.png'); background-size: cover; background-position: left; 
   }

   .section {
      padding: 25px 0;
   }

   .section.banner-hero video {
      display: none;
   }

   .section.banner-hero .inner {
      max-width: 600px;
   }
}

.horizontal-wrapper:has(.card .uil) {
   row-gap: 2.25rem;
   margin-top: 2.5rem;
}


/* ================================== */
/* == Additional custom elements ==== */
/* ================================== */


/* Formbox/banner styles ============ */


.fbg-anim-1, .fbg-anim-2 {
   content: '';
   position: absolute; 
   z-index: -1;
   background: none;
}

.light-bg .fbg-anim-1, .light-bg .fbg-anim-2 {
   opacity: 0.5;
} 

.fbg-anim-1.primary-color, .fbg-anim-2.primary-color {
   border-color: var(--color-primary-100);
}

.fbg-anim-1.secondary-color .fbg-anim-2.secondary-color {
   border-color: var(--color-secondary-100);
}

.fbg-anim-1 {
   top: -31.5%; right: 0;
   width: 140%; height: 40%;
   border-bottom: 1px solid;
   border-left: 1px solid;
   border-bottom-left-radius: 100%;
   opacity: 0.3;
}

.fbg-anim-2 {
   bottom: -47.5%;
   left: 30%;
   width: 70%;
   height: 75%;
   border-top: 3px solid;
   border-left: 3px solid;
   border-top-left-radius: 100%;
   opacity: 0.15;
}

@media (max-width: 800px) {
   .fbg-anim-2 {
      bottom: -2.5%;
      left: 0;
      width: 110%;
      height: 20%;
   }
}

.fb-anim-1, .fb-anim-2, .fb-anim-3, .fb-anim-4 {
   position: absolute;
   width: 175px; height: 175px;
   border-radius: 0.6rem;
}

.fb-anim-1.primary-color, .fb-anim-2.primary-color, .fb-anim-3.primary-color, .fb-anim-4.primary-color {
   background-color: var(--color-primary-100);
} 

.fb-anim-1.secondary-color, .fb-anim-2.secondary-color, .fb-anim-3.secondary-color, .fb-anim-4.secondary-color {
   background-color: var(--color-secondary-100);
}

.fb-anim-1 {
   right: 65%; top: 11%; transform: translateX(50%);
   opacity: 0.3;
}

.fb-anim-2 {
   right: 66.5%; top: 9%; transform: translateX(50%);
   opacity: 0.6;
}

.fb-anim-3 {
   left: 65%; bottom: 11%; transform: translateX(-50%);
   opacity: 0.3;
}

.fb-anim-4 {
   left: 66.5%; bottom: 9%; transform: translateX(-50%);
   opacity: 0.6;
}


/* Split section styles ============= */


.section .split {
   overflow: hidden;
}

.sp-anim-1, .sp-anim-2, .sp-anim-3 {
   position: absolute; 
   background: none;
   border-top-left-radius: 100%;
   opacity: 0.25;
   pointer-events: none;
}

.light-bg .sp-anim-1, .light-bg .sp-anim-2, .light-bg .sp-anim-3 {
   opacity: 0.65;
} 

.sp-anim-1.primary-color, .sp-anim-2.primary-color, .sp-anim-3.primary-color {
   border-color: var(--color-primary-100);
}

.sp-anim-1.secondary-color, .sp-anim-2.secondary-color, .sp-anim-3.secondary-color {
   border-color: var(--color-secondary-100);
}

.sp-anim-1.lines-hidden, .sp-anim-2.lines-hidden, .sp-anim-3.lines-hidden {
   border-color: transparent;
}

.sp-anim-1 {
   top: -20%; right: -15%;
   width: 30%; height: 140%;
   border-top: 3px solid;
   border-left: 3px solid;
}

.sp-anim-2 {
   top: 0; right: -10%;
   width: 30%; height: 140%;
   border-top: 3px solid;
   border-left: 3px solid;
}

.sp-anim-3 {
   top: 20%; right: 0;
   width: 180%; height: 90%;
   border-top: 2px solid;
   border-left: 2px solid;
   display: none;
}

.split .inner .uil {
   position: absolute;
   top: 50%; left: 90%;
   transform: translate(-50%, -50%);
   font-size: 25em; opacity: 0.25;
   z-index: -1;
}


/* Cards section styles ============= */


.section:has(.card) {
   overflow: visible;
}

.section:has(.card) .ca-anim-1 {
   position: absolute; 
   background: none;
}

.section:has(.card) .ca-anim-1.primary-color {
   border-color: var(--color-primary-100);
}

.section:has(.card) .ca-anim-1.secondary-color {
   border-color: var(--color-secondary-100);
}

.section:has(.card) .ca-anim-1 {
   top: 25%; right: -5%;
   width: 160%; height: 110%;
   border-top: 4px solid;
   border-left: 4px solid;
   border-top-left-radius: 100%;
   opacity: 0.25;
}

.section:has(.card).light-bg .ca-anim-1 {
   opacity: 0.65;
} 


/* Icons in cards =================== */


.card .uil {
  position: absolute;
  top: -5.5rem; left: 3rem;
  mix-blend-mode: overlay;
  pointer-events: none;

  font-size: 5.75rem; 
  color: var(--color-primary-100);
}


/* Form page elements =============== */


#form-hero .controls {
    display: flex; flex-direction: row; gap: 0;
    justify-content: center;
    width: 100%; max-width: 600px;
    margin: auto;
}

#form-hero .controls .btn-primary {
    margin: 0; width: 50%;
    border-radius: 0;
}