/*********************************************/
/*  theme.css		          			 		         */
/*-------------------------------------------*/
/*           This file is part of:           */
/*                 2ShineBS5                 */
/*            https://2shine.org/            */
/*-------------------------------------------*/
/*  Here you can override Bootstrap          */
/*  specific variables so they fit           */
/*  your needs.                              */
/*********************************************/

/* A list of all accessable variables can be found here */
/* https://getbootstrap.com/docs/5.3/customize/css-variables/#root-variables */

/* If the variables above don't fullfill your needs, use the docs */
/* https://getbootstrap.com/docs/5.3/customize/css-variables/#component-variables */

:root,
[data-bs-theme="default-theme"] {
  /* BS Main Colors */
  --bs-primary: #62A12B;
  --bs-secondary: #315115;
  --bs-primary-rgb: 98, 161, 43;
  --bs-secondary-rgb: 49, 81, 21;

  /* PNWANC accent colors */
  --pnwanc-yellow: #FFBA00;
  --pnwanc-tomato: #FA6641;
  --pnwanc-sky-blue: #32CAD8;
  --pnwanc-sky-blue-hover: #1A8089;

  /* Background Color for the backmost level */
  --theme-backdrop-bg: #E5E5E5;

  /* Default Background-Color and Color */
  --bs-body-bg: #fff;
  --bs-body-color: #222222;
  
  /* Theme Classes */
  --theme-page-main-bg: var(--bs-body-bg);
  --theme-breadcrumb-bg: var(--theme-page-main-bg);
  --theme-footer-bg: #323232;
  --theme-nav-bg: var(--bs-secondary);

  /* Override Link-Colors */
  --bs-nav-link-color: var(--bs-primary);
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: #4E8122; /* primary darkened 20%, as before */

  /* Font Setting */
  --theme-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --theme-font-headlines: var(--theme-font);
  --bs-body-font-family: var(--theme-font);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-h1-font-size: 2.5rem;
 
  /* Border Radius  */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;

  /* Shadows */
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);

  .breadcrumb {
    --bs-breadcrumb-font-size: 14px;
  }
  
  /* Main Button-Colors */
  .btn-primary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 15%, #000);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 15%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 15%, #000);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);    
  }

  .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--bs-white);
    --bs-btn-border-color: var(--bs-primary);
    
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);

    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
  }  

  .btn-secondary {
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);

    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 15%, #000);
    
    --bs-btn-disabled-color: var(--bs-white);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);    
  }

  .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-secondary);
    --bs-gradient: none;
  }

  .footer {
    --bs-link-color: var(--bs-white);
    --bs-link-hover-color: #adb5bd; /* light grey on the dark footer */
  }
    
  .navbar-nav {
    --bs-nav-link-color: #fff;
    --bs-nav-link-hover-color: #adb5bd;
    --bs-navbar-active-color: #fff;
  }

  /* Previous theme used 30px gutters (Bootstrap default is 24px) */
  .row {
    --bs-gutter-x: 30px;
  }

  .table {
    --bs-table-bg: var(--bs-white);    
  }  
}




/*********************************************/
/*  PNWANC custom styles                     */
/*  Ported from Custom/_general.scss and     */
/*  _variables.scss of the previous theme.   */
/*  Selectors renamed to-shine-* -> theme-*  */
/*********************************************/

/* Previous heading sizes and weight.
   "body" prefix is needed because styles.min.css loads after this file. */
body h1, body .h1 { font-size: 2.6rem; }
body h2, body .h2 { font-size: 2.2rem; }
body h3, body .h3 { font-size: 1.6rem; }
body h4, body .h4 { font-size: 1.2rem; }
body h5, body .h5, body h6, body .h6 { font-size: 1rem; }
body h1, body h2, body h3, body h4, body h5, body h6,
body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--bs-body-color);
}

/* Header date line (text is in theme-body.ascx) */
#theme-page-navigation h1 { font-size: 1.5rem; color: #fff; margin-bottom: 0; }

form#Form {
  background-color: white;
}

body.theme-variation-default main#theme-page-main {
  background-color: #ffffff;
}

/* Buttons: sky blue */
button, .button, a.button, .btn, .btn-primary {
  background-color: var(--pnwanc-sky-blue) !important;
  color: #fff !important;
  border: none !important;
}

button:hover, .button:hover, a.button:hover, .btn:hover, .btn-primary:hover {
  color: #fff !important;
  background-color: var(--pnwanc-sky-blue-hover) !important;
  border: none !important;
}

/* Submit button on the contact page */
input[type="submit"].button {
  padding: 6px 12px;
  font-size: 16px;
  border-radius: 6px;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* Nav bar colors */
#theme-page-navigation {
  background-color: var(--bs-secondary) !important;
  box-shadow: 2px 4px 8px rgba(25, 25, 25, .5);
}
#theme-page-navigation .navbar-nav .nav-link {
  color: white !important;
}
#theme-page-navigation .navbar-nav .nav-link:hover {
  color: #adb5bd !important;
}
#theme-page-navigation .navbar-toggler,
#theme-page-navigation .offcanvas-header button.btn-close {
  background-color: var(--bs-primary) !important;
}
#theme-page-navigation .navbar-toggler:hover,
#theme-page-navigation .offcanvas-header button.btn-close:hover {
  background-color: #45711E !important;
}

/* New in 5.4: login/logout lock icon in the nav, white on the green bar */
#theme-page-navigation .theme-login svg { fill: #fff; }

/* Color helper classes, e.g. class="pnwanc-yellow--txt" */
.primary--txt { color: #62A12B; }          .primary--bg { background-color: #62A12B; }
.secondary--txt { color: #315115; }        .secondary--bg { background-color: #315115; }
.Warning--txt { color: #842029; }          .Warning--bg { background-color: #842029; }
.dark--txt { color: #6c757d; }             .dark--bg { background-color: #6c757d; }
.pnwanc-yellow--txt { color: #FFBA00; }    .pnwanc-yellow--bg { background-color: #FFBA00; }
.pnwanc-tomato--txt { color: #FA6641; }    .pnwanc-tomato--bg { background-color: #FA6641; }
.pnwanc-sky-blue--txt { color: #32CAD8; }  .pnwanc-sky-blue--bg { background-color: #32CAD8; }