
/*
//
//  Main Overrides
//   - including Barrio theme fixes
*/

/* 
  root vars for spacing, borders, etc. 
  - color vars in colors.css
  - type vars in typography.css 
*/

:root {
  --border-rad-sm: 0.25em;
  --border-rad-md: 0.5em;
  --border-rad-lg: 1em;

  /* --row-gap-sm: 1em;
  --row-gap-md: 2.5em;
  --row-gap-lg: 4em;
 */
  /* apply Major Third scale (1.25) to row gap to match type scale
  https://utopia.fyi/type/calculator?c=320,18,1.25,1200,16,1.25,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
   */
  --row-gap-sm: 1lh;
  --row-gap-md: calc(1.33*var(--row-gap-sm));
  --row-gap-lg: calc(1.66*var(--row-gap-md));
  --row-gap-xl: calc(2*var(--row-gap-lg));

  --column-gap-sm: 0.5em;
  --gutter-sm: calc(2*var(--column-gap-sm));
  --gutter-sm: 1.5em;
  --column-gap-md: 1.5em;
  --gutter-md: calc(2*var(--column-gap-md));
  --column-gap-lg: 3em;
  --gutter-lg: calc(2*var(--column-gap-lg));
  --column-gap-xl: 4.5em;
  --gutter-xl: calc(2*var(--column-gap-xl));

  --border-radius-sm: var(--column-gap-sm);
  --border-radius-md: var(--column-gap-md);
  --border-radius-lg: var(--column-gap-lg);

  --scale-up-sm: 1.025;
  --scale-up-md: 1.05;
  --scale-up-lg: 1.1;
  
  --min-target-size: 44px; /* WCAG AA = 24px, but let's go AAA = 44px */

  /* @link https://utopia.fyi/clamp/calculator?a=320,992,32—18 */
  /* --min-target-size: clamp(1.125rem, 2.4167rem + -2.0833vw, 2rem); */
}

@media screen and (min-width: 768px) {
  :root{ 
     --min-target-size: 32px; 
  }
}
/* 

@media screen and (min-width: 992px) {
  :root{ 
     --min-target-size: 18px; 
  }
} */

/* basic reset for images */
img, .img-fluid {
  max-width: 100%;
  height: auto;
}


/* for giant screens, don't let the container fluid go wild -- stick to the .container def */

@media (min-width: 1200px) {
  .container-fluid {
      max-width: 1140px;
  }
}

/* override barrio padding in bootstrap injected styles (= 15px - close, but need em) */
.container, .container-fluid {
  padding-right: 1em;
  padding-left: 1em;
}

/* override Layout Builder widths from twocol_section.css -- @ 40em */
/* also in layout.css - ln 51.  -8-8-25 --aap */

/* 
  ** ohhh Layout Builder... these column sizes aren't readable for mid-size devices -
  ** let's go bigger 40em = 640px ---->> 768px  -8-13-25 --aap layout.css ln 51 good too
@media screen and (min-width: 40em) { */
@media screen and (min-width: 768px) {

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    flex: 0 1 64%;
  }
}




/*
 * @file
 * Provides the layout styles for two-column layout section.
 */

.layout--twocol-section {
  display: flex;
  flex-wrap: wrap;
}

.layout--twocol-section > .layout__region {
  flex: 0 1 100%;
}


/* reset original LB twocol_section styles for LB's bp to match .layout__region */
@media screen and (min-width: 40em) {
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
    /* flex: 0 1 50%; */
    flex: 0 1 100%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
    /* flex: 0 1 33%; */
    flex: 0 1 100%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    /* flex: 0 1 67%; */
    flex: 0 1 100%;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
    /* flex: 0 1 25%; */
    flex: 0 1 100%;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--first {
    /* flex: 0 1 75%; */
    flex: 0 1 100%;
  }
}

/* set original layout builder twocol_section styles for desired bp: 768px */

@media screen and (min-width: 768px) {
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
    flex: 0 1 50%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
    flex: 0 1 33%;
  }

  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    flex: 0 1 67%;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
    flex: 0 1 25%;
  }

  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--first {
    flex: 0 1 75%;
  }
}


/* reset the container for mid-size devices / tablets from inserted 
  bootstrap 4 styles -- from where? ??   8-13-25 -aap       */

@media (min-width: 576px) and (max-width: 767px) {
    .container {
        max-width: 686px;
    }
}








/* Undo BS bottom margin on .field--type-entity-reference -- field.css ln 6 */
.field--type-entity-reference {
  margin: 0 0 0 0;
}




/*
//  everything below is from the D8 site
//  tested while commented out, everything (at least on homepage) looks fine
//  may be able to delete       4/14/25 --aap
*/


/* 
html {
  height: 100%;
  scroll-behavior: smooth;
}  

body {
  background-color: #ffffff;
  min-height: 100%;
  height: 100%;
  overflow-x: hidden;
  margin-bottom: 4.25em;
}
 */
/* common reset for img */
/* img, picture, video, canvas, svg {
display: block;
max-width: 100%;
} */
/* 
.main-container
{
background: transparent;
} */

/* @media all and (min-width: 768px) {

body {
  margin-bottom: 0;
  margin-top: 4.25em;
}

#main-wrapper img {
  max-width: 100%;
  height: auto;
}

}

#hero-header-container
{
 width: 100%;
}

.navbar-btn {
  margin-top: 11px;
  margin-bottom:10px;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 25px;
  padding-right: 25px;
}

#main-wrapper img {
  max-width: 100%;
  height: auto;
}

a {
  color: #46166B;
  text-decoration: none;
  transition: 0.5s all;
}

a:hover {
  color: #642A90;
  text-decoration: underline;
}  

:focus { outline-color: #eeb211;}

body:not(.user-logged-in) p a, 
body:not(.user-logged-in) li:not(.nav-item) a {
  border-bottom: 1px solid rgba(100,42,144, 0.25);
  padding-bottom: 3px;
}

body:not(.user-logged-in) p a:hover, 
body:not(.user-logged-in) li:not(.nav-item) a:hover {
  border-bottom: 1px solid rgba(100,42,144, .70);
  text-decoration: none;
}
 */

/*

Global Styles

*/

/* 
div.main-container {
  padding-top: 50px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: 50px;
}

#main.container {
  padding-left: 0px;
  padding-right: 0px;
}

#main.container .row,
.grid-col-container .row {
  margin-left: 0px;
  margin-right: 0px;
}

#content {
  background: #ffffff;
  padding: 20px 25px;
  border-radius: 0px;
} */



/*
//
//
//   content
//
//
//
//
*/



/* in page buttons and button groups */

/* 
a.btn-primary {
  justify-content: center;
  padding: 1em 2em;
  border-radius: 0px;
  border-color: #642A90;
}


a.btn-outline-primary {
  display: inline-flex; 
  justify-content: center;
  padding: .75em 1em;
  border-radius: 0px;
  color: #642A90;
  border-color: #642A90;
  margin-bottom: 0px;
  width: 100%;
}


@media all and (min-width: 769px) {
  a.btn-outline-primary {
    width: auto;
  }
}

a.btn-outline-primary:hover {
  background-color: #46166B;
  border-color: #642A90;
  color: #ffffff;
}


div[role=tablist] .list-group-item.active {
  background-color: #fbf5e6;
  border-color: #eeb211;
  color: #46166B;
}
 */
