@import url(./css/startingline_2025.css);
@import url(./css/hero.css);
@import url(./css/custom.utilities.css);
@import url(./css/custom.animations.css);

:root {
  --base-body-font: "Roboto", sans-serif;
  --base-title-font: "Roboto", sans-serif;

  --spacer: var(--bs-body-font-size, 1rem);
  --spacing-xxs: calc(var(--spacer) / 2.5);
  --spacing-xs: calc(var(--spacer) / 2);
  --spacing-sm: calc(var(--spacer) / 1.5);
  --spacing-md: var(--spacer);
  --spacing-lg: calc(var(--spacer) * 1.5);
  --spacing-xl: calc(var(--spacer) * 3);

  /* BS BS */
  /* redfining the BS globals with site variables for the future! */
  /* this is where we are going to override the bootstrap :root variables */
  /* It is not an exhaustive list. add to it as needed */
  --bs-font-sans-serif: var(--base-body-font) !important;
  --bs-body-font-family: var(--base-body-font) !important;

  --bs-body-color-rgb: 102, 102, 102;
  --bs-heading-color: var(--bs-dark);
  --bs-link-color: var(--bs-primary-text-emphasis) !important;
  
  --bs-opacity: 0.75;
  
  --bs-primary-rgb: 31, 57, 105;
  --bs-primary: rgba(var(--bs-primary-rgb), 1);
  --brand-blue: var(--bs-primary);

  
  --bs-danger: rgb(160, 64, 62);
  
  --bs-primary-text-emphasis-rgb: 18, 71, 175;
  --bs-primary-text-emphasis: rgb(18, 71, 175);
  
  --bs-secondary-rgb: 224, 159, 51;
  --bs-opcacity: 0.75;
  --bs-secondary: rgba(var(--bs-secondary-rgb), 1);
  
  --bs-tertiary-rgb: 118, 148, 181;
  --bs-tertiary: rgb(var(--bs-tertiary-rgb));
  --brand-blue-light: var(--bs-tertiary);
  
  --bs-gray-500-rgb: 160, 164, 166;
  --bs-gray-500: rgb( var( --bs-gray-500-rgb ) );
 
  --bs-gray-400-rgb: 199, 206, 209;
  
  --bs-gray-rgb: var(--bs-gray-400-rgb);
  --bs-gray: rgb( var( --bs-gray-rgb ) );

  --bs-light-rgb: 235, 240, 241;
  
  /* setting the heading font sizes as variables so we can reuse them when necessary */
  --fs-h1: 3rem;
  --fs-h2: 2.75rem;
  --fs-h3: 2.25rem;
  --fs-h4: 2rem;
  --fs-h5: 1.5rem;
  --fs-h6: 1.25rem;

  --bs-body-font-size: var(--fs-h6); /* 20px */
  
  --bs-gradient: linear-gradient(178deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));

  /* Border radius */
  --bs-card-border-radius: 0rem !important;
  --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - (var(--bs-border-width)));
  --form-border-radius: 0;

  --sl-font-size-x-large: 2rem;

  --sl-color-neutral-600: var(--bs-gray-600);
  --sl-color-neutral-300: var(--bs-gray-300);

  --sl-spacing-small: var(--spacing-sm);
  --sl-border-radius-circle: var(--bs-border-radius-xxl);

  /* --bs-nav-link-color: var(--bs-tertiary); */
}

main.page-content {

  .nav-link { 

    text-decoration: underline;
    text-underline-offset: 0.3rem;
    transform-origin: center;
    transition: text-underline-offset 0.15s linear;
  
    &:hover {
      text-underline-offset: 0.1rem;
    }
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////// Page - Layout */
/* //////////////////////////////////////////////////////////////////////////////////////////////////////// */

html,
#Body,
#Form {
  height: 100%;
}
/*

#Form {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 0;
  margin-block-end: 0;
}  
*/

/* //////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////// this is alleviates a legacy code issue and the form element. thank you bootstrap reboot.css */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////// */
#Form {
  margin-bottom: 0;
  margin-block-end: 0;
}  

.container-wrap {
  /* pancake stack layout that works because there are SO many divs*/
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  /* pancake stack layout that sort of works */
  /*
  display: grid;
  grid-template-rows: auto auto 1fr auto; 
  */
}  


/* ////////////////////////////////////////////////////////////////////////////////////////// PAGE - Content */
/*
.page-content {}
.page-content-- {}
.page-content--left {}
.page-content--right {}
*/
main.page-system {
  flex: 1 0;
  width: 100%;
  align-content: center;
  justify-content: center;
}

main.page-content {
  min-height: 100%;
  flex: 1;
}


main.page-library {
  #dnn_topPane {
    .DnnModule:nth-child(odd) {
      background-color: var(--bs-light);
    }
  }
}


main.page-search-results {
  padding-bottom: var(--spacing-xl);
}

.DnnModule .cjcc-title,
.DnnModule h3.h3 {
  text-align: center;
  padding: var(--spacing-md);
  text-transform: uppercase;
  background-color: rgba( var(--bs-secondary-rgb), 1);
  font-weight: 900;
  margin-bottom: 0;
}

.DNNEmptyPane.my-4 {
  display: none;
}

footer.footer {
  flex: 0;
  width: 100%;
}

/* 
#accessibilityBar,
#accessibilityBar.active {
  button.setAccessibility[data-accessibility="contrast"],
  button.setAccessibility[data-accessibility="dark"] {
    display: none!important;
  }
} 
*/



/* Live Form OVerrrides */
.LiveForm.StartingLine {
  --spacing: var(--spacing-md);
  --bs-border-color: var(--bs-primary-bg-subtle) !important;
  --bs-border-emphasis: var(--bs-border-color) !important;
  --label-width: clamp(232px, 27%, 100%);
 
  br {
    display: none!important;
  }

  /* address fields in a table i guess... its fine */
  table {
    border-collapse: collapse;

    width: 100%;
    
    td {
      padding-bottom: var(--spacing-xs);

      input {
        width: 100%!important;
      }
    }
  }

  li.Field {
    display: flex !important;
    flex-direction: column;

    label.Field-Label-Top {
      margin-bottom: 0;
      padding: var(--spacing-sm) var(--spacing-md);
      background: #203964;
      font-weight: normal;
      width: var(--label-width);
      line-height: 1;
      color: #FFF;
      align-self: flex-start;
      border-right: 4px solid var(--bs-primary);
    }
  }
  
  li.Field.Captcha {
    .Field-Label-Hidden {
      width: calc(var(--label-width) + var(--spacing-sm));
    }
  }

  li.Field.Required {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
      --bs-border-multiplier: 1 !important;
      
      border-left-color: var(--bs-gray-400)!important;
    }
    
    label.Field-Label-Top {
      border-right: 4px solid var(--bs-danger);
    }
  }

  li.Field.Radiobutton {
    table {
    }
    table tr td {
      border: 1px solid var(--bs-gray-400);
      padding: 0.45rem var(--spacing-xs)!important;
      text-align: center;


      input {
        margin-right: var(--spacing-xs);
      }
    }
  }

  li.Field.Submitbutton {
    .Field-Label-Auto {
      display: none;
    }
    
    input[type="submit"],
    input[type="button"] {
      --bs-btn-padding-y: var(--spacing-md)!important;
      --bs-btn-padding-x: var(--spacing-lg)!important;
      --bs-btn-font-size: var(--fs-h5)!important;
      --bs-btn-font-weight: 800!important;
      --bs-btn-border-radius: 0!important;
      --bs-btn-bg: var(--bs-secondary )!important;
      --bs-btn-color: var(--bs-primary)!important;
      --bs-btn-border-color: var(--bs-secondary)!important;
      --bs-btn-hover-bg: var(--bs-secondary)!important;
      --bs-btn-hover-color: var(--bs-light)!important;
      --bs-btn-hover-border-color: var(--bs-secondary)!important;
      --bs-text-transform: uppercase!important;
      --bs-border-multiplier: 1 !important;
      
      min-width: var(--label-width) !important;
    }
  }


  /* input fields */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    --bs-border-radius: 0;
    --bs-border-color: var(--bs-gray-400);
    line-height: 1.25!important;
    padding: var(--spacing-sm) var(--spacing-md)!important;
    min-width: var(--label-width)!important;
    margin-top: 0;
  }

  .Field-Container-Wide,
  .Field-Container {
    flex: 1 1 100%;
  }

  .Field-Container-Wide,
  .Field-Container {
    div {
      gap: var(--spacing-md);
      display: flex!important;
      flex-direction: column;
    }
  }
}

@media screen and (max-width: 769px) {
  .LiveForm.StartingLine { 
    --label-width: 100%;
  }
}

@media screen and (min-width: 1023px) {
  .LiveForm.StartingLine { 
    .Field.Submitbutton {
      /* 
      div {
        width: 100%; 
        
      }
      */
      .Submit-Align-Center {
        justify-content: center;
      }
      .Submit-Align-Left {
        width: auto;
        transform: translateX(calc( var(--label-width) + 0.5rem ));
      }
    }
  }

  .Field-Container-Wide,
  .Field-Container {
    flex-direction: row;
    position: relative;
    /* width: 76%; */
    flex: 1 1 73%;
  }
}

.Field-SubLabel-TextBox {
  width: 100%;
}

li.Field.Phone .Field-SubLabel-Container {
  display: none;
}